$.ajax 和 jquery.form.js实现表单异步提交
今天遇到了一个问题:异步刷新表单,表单里面有radio,事先选中了其中一个,点击排序后,原来选中的值没有被选中了。查看是采用了$.ajax()进行异步刷新的,改为使用jquery.form.js进行异步刷新,原来选中的radio还是被选中的,问题解决了。 原因是:使用$.ajax的时候没有采取其他处理,直接是发送了原来默认的url进行了查询,原来选中的值当然就没有了,success回调函数中进行了排序。而使用jquery.form.js的时候,没有调用任何有关的重置表单的变量,自然而然之前选中的值还在。 补充:$.ajax() Perform an asynchronous HTTP (Ajax) request. ——来自官网:http://api.jquery.com/jquery.ajax/ 如果要处理$.ajax()得到的数据,则需要使用回调函数。beforeSend、error、dataFilter、success、complete。 $.ajax方法详解(http://www.cnblogs.com/tylerdonet/p/3520862.html) 1.url: 2.type: 3.timeout: 4.async: 5.cache: 6.data: 7.dataType: 8.beforeSend: 10.success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。 11.error: 12.contentType: 13.dataFilter: 14.dataFilter: 15.global: 16.ifModified: 17.jsonp: 18.username: 19.password: 20.processData: 21.scriptCharset: $(function(){ $('#send').click(function(){ $.ajax({ type: "GET",url: "test.json",data: {username:$("#username").val(),content:$("#content").val()},dataType: "json",success: function(data){ $('#resText').empty(); //清空resText里面的所有内容 var html = ''; $.each(data,function(commentIndex,comment){ html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para"' + comment['content'] + '</p></div>'; }); $('#resText').html(html); } }); }); }); 22.顺便说一下$.each()函数: $.each()函数不同于JQuery对象的each()方法,它是一个全局函数,不操作JQuery对象,而是以一个数组或者对象作为第1个参数,以一个回调函数作为第2个参数。回调函数拥有两个参数:第1个为对象的成员或数组的索引,第2个为对应变量或内容。
关于jquery.form.js插件 Submitting a form with AJAX doesn't get any easier than this! 英文: http://malsup.com/jquery/form/ // 绑定表单提交事件处理器 $('#myFormId').submit(function() { // 提交表单 $(this).ajaxSubmit(); // 为了防止普通浏览器进行表单提交和产生页面导航(防止页面刷新?)返回false return false; }); 中文API: http://www.360doc.com/content/12/0930/16/1542811_238911976.shtml 表单插件API提供了几个方法,让你轻松管理表单数据和进行表单提交。 1. ajaxForm 实例: $('#myFormId').ajaxForm(); 2. ajaxSubmit 马上由AJAX来提交表单。大多数情况下,都是调用ajaxSubmit来对用户提交表单进行响应。ajaxSubmit接受0个或1个参数。这个单个的参数既可以是一个回调函数,也可以是一个Options对象。 实例: // 绑定表单提交事件处理器 $('#myFormId').submit(function() { // 提交表单 $(this).ajaxSubmit(); // 为了防止普通浏览器进行表单提交和产生页面导航(防止页面刷新?)返回false return false; }); 3. formSerialize 将表单串行化(或序列化)成一个查询字符串。这个方法将返回以下格式的字符串:name1=value1&name2=value2。 实例: var queryString = $('#myFormId').formSerialize(); // 现在可以使用$.get、$.post、$.ajax等来提交数据 $.post('myscript.php',queryString); 4. fieldSerialize 将表单的字段元素串行化(或序列化)成一个查询字符串。当只有部分表单字段需要进行串行化(或序列化)时,这个就方便了。这个方法将返回以下格式的字符串:name1=value1&name2=value2。 var queryString = $('#myFormId .specialFields').fieldSerialize(); 5. fieldValue 返回匹配插入数组中的表单元素值。从0.91版起,该方法将总是以数组的形式返回数据。如果元素值被判定可能无效,则数组为空,否则它将包含一个或多于一个的元素值。 // 取得密码输入值 var value = $('#myFormId :password').fieldValue(); alert('The password is: ' + value[0]); 6. resetForm 通过调用表单元素原有的DOM方法,将表单恢复到初始状态。 <strong>$('#myFormId').resetForm(); </strong> 7. clearForm 清除表单元素。该方法将所有的文本(text)输入字段、密码(password)输入字段和文本区域(textarea)字段置空,清除任何select元素中的选定,以及将所有的单选(radio)按钮和多选(checkbox)按钮重置为非选定状态。 实例: $('#myFormId').clearForm(); 8. clearFields 清除字段元素。只有部分表单元素需要清除时才方便使用。 实例: $('#myFormId .specialFields').clearFields(); 9. Options对象 ajaxForm和ajaxSubmit都支持众多的选项参数,这些选项参数可以使用一个Options对象来提供。Options只是一个JavaScript对象,它包含了如下一些属性与值的集合: 9.1 target [ { name: 'username',value: 'jresig' },{ name: 'password',value: 'secret' } ] 默认值:null 9.5 success 表单成功提交后调用的回调函数。如果提供“success”回调函数,当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。 默认值:null 9.6 dataType 期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。dataType提供一种方法,它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持: 'xml':如果dataType == 'xml',将把服务器响应作为XML来对待。同时,如果“success”回调方法被指定, 将传回responseXML值。 'json':如果dataType == 'json', 服务器响应将被求值,并传递到“success”回调方法,如果它被指定的话。 'script':如果dataType == 'script', 服务器响应将求值成纯文本。 (译注:上面一些地方鬼佬说的不清不楚,只好意译了,希望能够表达原意。) 默认值:null(服务器返回responseText值) 9.7 semantic // 准备好Options对象 var options = { target: '#divToUpdate',url: 'comment.php',success: function() { alert('Thanks for your comment!'); } }; // 将options传给ajaxForm $('#myForm').ajaxForm(options);注意:Options对象还可以用来将值传递给jQuery的$.ajax方法。如果你熟悉$.ajax所支持的options,你可以利用它们来将Options对象传递给ajaxForm和ajaxSubmit。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |