详解Ajax请求（三）——jQuery对Ajax的实现及serialize()函数对于表单域控件参数提交的使用技巧

时间：2022-02-21 22:34:02

　　原生的Ajax对于异步请求的实现并不好用，特别是不同的浏览器对于Ajax的实现并不完全相同，这就意味着你使用原生的Ajax做异步请求要兼顾浏览器的兼容性问题，对于java程序员来讲这是比较头疼的事情，还好jQuery的出现帮我们解决了兼容性的问题，而且让异步请求的实现更加简单直观。

　　总结下来，jQuery对于Ajax的实现常用的方法一共有三个，分别是：$.ajax(),$.get(),$.post()，其中$.get()和$.post()方法分别是对$.ajax()方法的j简写。至于这三个方法的使用细节可以参考：http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp。本文主要对使用jquery发送ajax时表单元素参数提交的技巧进行说明。

　　我们来看一个使用场景：

<input type="button" id="testBtn" value="测试按钮" onclick="sentAjax();"/><br>

<form action="" id = "formId">

<input type="text" name = 'name'  id="NAME"/><br>

<input type="text" name = 'id' id="ID" /><br>

</form>

　　要求发送ajax请求时提交id为NAME和ID的表单元素我们先看一下传统的做法。

function sentAjax(){

    var name = $("#NAME").val();

    var id = $("#ID").val();

    var sendData = "name=" + name + "&id=" + id;

    $.ajax({

          type: 'POST',

          url:"<%=basePath%>/manage/test/ajax",

          data: sendData,

          success: function(getData){

          }

        });

 }

　　我们发现使用传统的做法要对表单控件逐个进行取值并且还要进行字符串的拼接（当然，如果你data用的是json格式就不用进行字符串拼接了，但还是免不了逐个进行取值），我们再看看使用jquery的serialize()方法是怎么做的。

　　

function sentAjax(){

    var formParam = $("#formId").serialize();

    alert(formParam);

    $.ajax({

          type: 'POST',

          url:"<%=basePath%>/manage/test/ajax",

          data: $("#formId").serialize(),

          success: function(getData){

          }

        });

 }

　　详解Ajax请求（三）——jQuery对Ajax的实现及serialize()函数对于表单域控件参数提交的使用技巧

　　我们发现使用serialize()函数让我们免去了对表单控件逐个进行取值并且还要进行字符串的拼接的麻烦。serialize()函数底层对表单元素做了序列化的处理，同时serialize()函数允许我们选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。我们再来看看下面的应用场景

　　

<input type="button" id="testBtn" value="测试按钮" onclick="sentAjax();"/><br>

<form action="" id = "formId">

<input type="text" name = 'name'  id="NAME"/><br>

<input type="text" name = 'id' id="ID" /><br>

<input type="checkbox"  name="ck" value="1"/><br>

<input type="checkbox"  name="ck" value="2"/><br>

<input type="checkbox"  name="ck" value="3"/><br>

<input type="checkbox"  name="ck" value="4"/><br>

</form>

　　要求发送ajax请求时提交已选中的name为'ck'的复选框，其它的表单元素不做提交。按照传统的做法代码我们要这么写。

function sentAjax(){

    var selectedCheckbox = $(":checkbox[name=ck]:checked");

    var sendDatas = "";

    $.each(selectedCheckbox,function(index,item){

        sendDatas += "&ck=" + item.value;

    });

    sendDatas = sendDatas.substring(1);

    $.ajax({

          type: 'POST',

          url:"<%=basePath%>/manage/test/ajax",

          data: sendDatas,

          success: function(getData){

          }

        });

 }

　　再来看看使用serialize()函数的做法，代码写起来就很简单。

function sentAjax(){

    var sendDatas = $(":checkbox[name=ck]:checked").serialize();

    $.ajax({

          type: 'POST',

          url:"<%=basePath%>/manage/test/ajax",

          data: sendDatas,

          success: function(getData){

          }

        });

 }

　这里提几点需要注意的，

　（1）使用serialize()函数时，要序列化的表单元素不一定非要在<form></form>标签中，如果你只是要序列化某个<form></form>标签下的表单元素，其它<form></form>下的表单元素或者<form></form>外的表单元素不做序列化，就要使用以下的语句（注意冒号前面的空格不能少，这里用到了jQuery的层级选择器）。

var params = $("#formId :checkbox[name=ck]:checked").serialize();

　（2）：对于复选框（checkbox)使用serialize()函数进行序列化时，只能序列化被选中的复选框如下写法不能序列化未选中的复选框（这种写法序列化的也只能是选中的复选框，若是想发送ajax请求时提交未选中的的复选框，请参照传统的写法对所有的复选框按照checked属性进行过滤）。

var params = $("#formId :checkbox[name=ck]").serialize();

参考文章：http://www.w3school.com.cn/jquery/ajax_serialize.asp

最后说一点，我们作为程序员，研究问题还是要仔细深入一点的。当你对原理了解的有够透彻，开发起来也就得心应手了，很多开发中的问题和疑惑也就迎刃而解了，而且在面对其他问题的时候也可做到触类旁通。当然在开发中没有太多的时间让你去研究原理，开发中要以实现功能为前提，可等项目上线的后，你有大把的时间或者空余的时间，你大可去刨根问底，深入的去研究一项技术，为觉得这对一名程序员的成长是很重要的事情。

　　

相关文章