JQuery-Form中的AjaxForm和AjaxSubmit的区别和中文乱码
2012-09-03 14:26
435 查看
JQuery中的AjaxForm和AjaxSubmit使用差不多功能也差不多。很容易误解。
按照作者的解释:
AjaxForm
ajaxForm不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始
ajaxSubmit
马上由AJAX来提交表单。你可以在任何情况下进行该项提交。
option的参数
jQuery(form).ajaxSubmit({
url: "ajaxsub.aspx?abc=test",
type: "post",
dataType: "json",
success: data
});
分析:JQuery的AJAX提交,会将要提交的数据进行编码,使用encodeURIComponent在js中处理数据。因此,无论是 Firefox或者IE,提交的数据都是一致的,都是UTF-8编码后的数据。
查看Header,发现Entity中的Content-Type存在差异
在Firefox中,Content-Type指定了字符集为utf-8。
而IE里面却没有任何字符集指定,
显然,默认情况下,AJAX的异步提交的字符编码应该和网页本身保持一致,也就是说,Server端在没有发现显示的charset指定的情
况下,使用gb2312来解码数据(但是数据在提交前已经被UTF-8编码了),这就是为什么在IE下会出现乱码的根源,而在Firefox下,浏览器在
提交AJAX数据的时候,加上了charset的显示指定,导致Server端采用UTF-8来解码数据(正确解码)。
查阅JQuery的AJAX工具函数的说明,发现options中有一个指定content-type的参数
所以在提交的时候要指定编码类型
contentType: "application/x-www-form-urlencoded; charset=utf-8",
即如下
jQuery(form).ajaxSubmit({
url: "ajaxsub.aspx?abc=test",
type: "post",
dataType: "json",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: data
});
按照作者的解释:
AjaxForm
ajaxForm不能提交表单。在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始
ajaxSubmit
马上由AJAX来提交表单。你可以在任何情况下进行该项提交。
option的参数
var options = { target: '#output1', // target element(s) to be updated with server response beforeSubmit: showRequest, // pre-submit callback success: showResponse // 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 }; ajaxForm The following code controls the HTML form beneath it. It uses ajaxForm to bind the form and demonstrates how to use pre- and post-submit callbacks // prepare the form when the DOM is ready $(document).ready(function() { var options = { target: '#output1', // target element(s) to be updated with server response beforeSubmit: showRequest, // pre-submit callback success: showResponse // 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' $('#myForm1').ajaxForm(options); }); // pre-submit callback function showRequest(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: \n\n' + 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; } // post-submit callback function showResponse(responseText, statusText) { // for normal html responses, the first argument to the success callback // is the XMLHttpRequest object's responseText property // if the ajaxForm method was passed an Options Object with the dataType // property set to 'xml' then the first argument to the success callback // is the XMLHttpRequest object's responseXML property // if the ajaxForm method was passed an Options Object with the dataType // property set to 'json' then the first argument to the success callback // is the json data object returned by the server alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + '\n\nThe output div should have already been updated with the responseText.'); } ajaxSubmit The following code controls the HTML form beneath it. It uses ajaxSubmit to submit the form. // prepare the form when the DOM is ready $(document).ready(function() { var options = { target: '#output2', // target element(s) to be updated with server response beforeSubmit: showRequest, // pre-submit callback success: showResponse // 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 to the form's submit event $('#myForm2').submit(function() { // inside event callbacks 'this' is the DOM element so we first // wrap it in a jQuery object and then invoke ajaxSubmit $(this).ajaxSubmit(options); // !!! Important !!! // always return false to prevent standard browser submit and page navigation return false; }); }); // pre-submit callback function showRequest(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: \n\n' + 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; } // post-submit callback function showResponse(responseText, statusText) { // for normal html responses, the first argument to the success callback // is the XMLHttpRequest object's responseText property // if the ajaxSubmit method was passed an Options Object with the dataType // property set to 'xml' then the first argument to the success callback // is the XMLHttpRequest object's responseXML property // if the ajaxSubmit method was passed an Options Object with the dataType // property set to 'json' then the first argument to the success callback // is the json data object returned by the server alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + '\n\nThe output div should have already been updated with the responseText.'); } 改变中文乱码方案 form.js增加如下代码 $.fn.param=function( a ) { var encode=function(v){//如果包含中文就escape,避免重复escape) return /[^\x00-\xff]/g.test(v)?escape(v):v; } var s = []; if ( a.constructor == Array || a.jquery ) jQuery.each( a, function(){ s.push( encode(this.name) + "=" + encode( this.value ) ); }); else for ( var j in a ) if ( a[j] && a[j].constructor == Array ) jQuery.each( a[j], function(){ s.push( encode(j) + "=" + encode( this ) ); }); else s.push( encode(j) + "=" + encode( a[j] ) ); return s.join("&").replace(/%20/g, "+"); } 之后把所有调用$.param的地方改成 this.param, $(document).ready(function() { var options = { beforeSubmit:showRequest, //success:showResponse }; $('#regForm').ajaxForm(options); }); function showRequest(formData, jqForm, options) { var queryString = this.param(formData); return true; }
JQuery ajaxSubmit提交中文乱码的解决方案
一般人使用是jQuery(form).ajaxSubmit({
url: "ajaxsub.aspx?abc=test",
type: "post",
dataType: "json",
success: data
});
分析:JQuery的AJAX提交,会将要提交的数据进行编码,使用encodeURIComponent在js中处理数据。因此,无论是 Firefox或者IE,提交的数据都是一致的,都是UTF-8编码后的数据。
查看Header,发现Entity中的Content-Type存在差异
在Firefox中,Content-Type指定了字符集为utf-8。
而IE里面却没有任何字符集指定,
显然,默认情况下,AJAX的异步提交的字符编码应该和网页本身保持一致,也就是说,Server端在没有发现显示的charset指定的情
况下,使用gb2312来解码数据(但是数据在提交前已经被UTF-8编码了),这就是为什么在IE下会出现乱码的根源,而在Firefox下,浏览器在
提交AJAX数据的时候,加上了charset的显示指定,导致Server端采用UTF-8来解码数据(正确解码)。
查阅JQuery的AJAX工具函数的说明,发现options中有一个指定content-type的参数
所以在提交的时候要指定编码类型
contentType: "application/x-www-form-urlencoded; charset=utf-8",
即如下
jQuery(form).ajaxSubmit({
url: "ajaxsub.aspx?abc=test",
type: "post",
dataType: "json",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: data
});
相关文章推荐
- JQuery读书笔记--JQuery-Form中的AjaxForm和AjaxSubmit的区别
- jQuery.form.js使用ajaxSubmit()提交表单时返回中文乱码的问题
- JQuery读书笔记--JQuery-Form中的AjaxForm和AjaxSubmit的区别
- (转)JQuery读书笔记--JQuery-Form中的AjaxForm和AjaxSubmit的区别
- JQuery读书笔记--JQuery-Form中的AjaxForm和AjaxSubmit的区别
- JQuery-Form中的AjaxForm和AjaxSubmit的区别
- JQuery读书笔记--JQuery-Form中的AjaxForm和AjaxSubmit的区别
- JQuery读书笔记--JQuery-Form中的AjaxForm和AjaxSubmit的区别
- get方式地址栏传中文参数乱码 及 form表单利用jquery.serialize()序列化中文参数乱码 解决总结
- 区别easyui下的form()方法、jquery.form.js插件的ajaxForm()方法
- JQuery/formValidator ajax中文乱码最合理解决方式
- jquery $("#form").serialize()传中文乱码解决方法
- jquery.form 提交中文时乱码(GBK 乱码)的解决方案
- jquery form表单.serialize()序列化后中文乱码问题原因及解决
- jquery form表单.serialize()序列化后中文乱码问题原因及解决decodeURIComponent
- 解决3.01版的jquery.form.js中文乱码问题的解决方法
- 解决3.01版的jquery.form.js中文乱码问题的解决方法
- JQuery ajaxForm,ajaxSubmit的联系和区别
- jQuery.form.js进行表单提交,中文乱码问题及解决
- jquery的$('#theForm').serialize()获取表单数据,ajax传递到服务器中文乱码。