Home > Web Front-end > JS Tutorial > body text

Jquery.Form A simple example of asynchronous form submission_jquery

WBOY
Release: 2016-05-16 16:57:34
Original
1185 people have browsed it

http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html#

1. Write a form in your page. A normal form, no special markup is required:

Copy code The code is as follows:



Name:
Password:






without Jquery.Form component When submitting the form, the page will enter blocking mode, waiting for a response from the server.

2. Introduce jQuery and Form Plugin Javascript script files and add a few simple codes to allow the page to initialize the form after the DOM is loaded:



 


After adding the jquery.form component, when submitting the form, the page will no longer be submitted synchronously, but will be submitted asynchronously by js, so the page will not be refreshed after submission.

3. Add a callback function that can interact with the server.



Copy code


The code is as follows:

$(document).ready(function () {
     //options是一个ajaxForm的配置对象。?
     var options = {
        //target: '#output1',   // target element(s) to be updated with server response 
        //beforeSubmit: showRequest,  // pre-submit callback 
       success: callBackFunc  // post-submit callback 

        // other available options: 
        //url:       url         // override for form's 'action' attribute 
        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 

        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    };

    // bind form using 'ajaxForm' 
    $('#myForm').ajaxForm(options);
}); 

 // responseText是服务端的响应值。statusText是页面

 // 提交状态值,success表示成功。
function callBackFunc(responseText, statusText) {
    if (statusText == 'success') {
        alert(responseText);
    }

 else{

 alert(“服务端错误!”);

      }
}

如果返回的是json数据则回调函数可以这么写
function resultFunction(responseText,statusText) {
        if (statusText == 'success') {
            if (responseText.code == 1) {
                alert(responseText.message);
            } 
            else {
                alert('error occurs!');
            }
        }
        else {
            alert('服务器错误!');
        }
    }


服务端的代码如下:
复制代码 代码如下:

[HttpPost]
public ActionResult AjaxForm(FormCollection form)
{
    string message = "Name:" form["username"] " PWD: " form["password"]  ;
    //return Content(message);
    return Json(new { code = 1, message = message });
}

4. 加入提交前的数据校验函数
为options对象添加 beforeSubmit属性
复制代码 代码如下:

var options = {
                //target: '#output1',   // target element(s) to be updated with server response 
                beforeSubmit: checkData,  // pre-submit callback 
                success: callBackFunc  // post-submit callback 

                // other available options: 
                //url:       url         // override for form's 'action' attribute 
                //type:      type        // 'get' or 'post', override for form's 'method' attribute 
                //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
                //clearForm: true        // clear all form fields after successful submit 
                //resetForm: true        // reset the form after successful submit 

                // $.ajax options can be used here too, for example: 
                //timeout:   3000 
            };
 // pre-submit callback 
       function checkData(formData, jqForm, options) {
           // formData is an array; here we use $.param to convert it to a string to display it 
           // but the form plugin does this for you automatically when it submits the data 
           //var queryString = $.param(formData);

           // jqForm is a jQuery object encapsulating the form element.  To access the 
           // DOM element for the form do this: 
           var formElement = jqForm[0]; 

           //alert('About to submit: nn' queryString);

           // here we could return false to prevent the form from being submitted; 
           // returning anything other than false will allow the form submit to continue 
           //return true;
           if ($(formElement).find("#username").val() == "") {
               alert("please enter username!");
               return false;
           } else {
               return true;
           }
       }

验证用户名是否为空,是则提示输入,并取消表单提交。
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template