Jquery.Form A simple example of asynchronous form submission_jquery

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:

// wait for the DOM to be loaded $ (document).ready(function() { $('#myForm').ajaxForm(function() { alert("Thank you for your comment!"); }); 🎜> 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; } } 验证用户名是否为空，是则提示输入，并取消表单提交。