jQuery与Ajax的应用

最新推荐文章于 2023-04-28 00:01:14 发布

向着阳光奔跑的少年

最新推荐文章于 2023-04-28 00:01:14 发布

阅读量5.5k

点赞数 3

分类专栏： jQuery Web前端开发文章标签： jquery ajax xml 浏览器插件 javascript

本文链接：https://blog.csdn.net/li286487166/article/details/51203145

版权

jQuery 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

Web前端开发

5 篇文章 0 订阅

订阅专栏

jQuery与Ajax的应用

Ajax全称为 Asynchronous javaScript and XML 异步javascript和XML。
它并不是指一种单一的技术，而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体。

1.Ajax的优势和不足

1.1Ajax的优势

1.不需要插件支持

Ajax不需要任何浏览器插件，就可以被绝大多数主流浏览器所支持，用户只需要允许JavaScript在浏览器上执行即可

2.优秀的用户体验

这是Ajax技术的最大优点，能在不刷新整个页面的前提下更新数据，这使得web应用程序能更为迅速地回应用户的操作。

3.提高web程序的性能

与传统模式相比，Ajax模式在性能上的最大区别就在于传输数据的方式，在传统模式中，数据提交是通过表单来实现的，而数据获取是靠全面刷新来重新获取整页的内容。而Ajax模式只是通过XMLHttpRequest对象向服务器端提交希望提交的数据，即按需发送。

4.减轻服务器和带宽的负担

Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。它在客户端创建Ajax引擎，把传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和带宽的负担。

1.2Ajax的不足

1.浏览器对XMLHttpRequest对象的支持不足
2.破坏浏览器前进、后退按钮的正常功能
3.对搜索引擎的支持的不足
4.开发和调试工具的缺乏

2.编写1个Ajax例子

在接触Jquery的ajax操作之前，我们先回顾一下传统JavaScript实现ajax的例子。

例子：单击一个按钮，然后通过传统的JavaScript的ajax的方式从服务器端取回一个HelloAjax的字符串并显示在页面上。

首先在前台页面中属性HTML代码

<input type="button" value="ajax提交" onclick="Ajax()" />

    <div id="resText"></div>

button按钮用来触发Ajax，id为resText的元素用来显示从服务器返回的HTML文本。
接下来的任务就是完成Ajax()函数。
实现步骤如下：

1.定义一个函数，通过该函数来异步获取信息，代码如下：

function Ajax(){
        //...
    }

2.声明一个空对象用来装入XMLHttpRequest对象

var xmlHttpReq = null;

3.给XMLHttpRequest对象赋值，代码如下

if(window.ActiveXObject){//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest对象的
        xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }else if(window.XMLHttpRequest){//除IE5 IE6以外的浏览器。XMLHttpRequest是window的子对象
        xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest对象
    }

4.使用open方法初始化XMLHttpRequest对象，指定HTTP方法和要使用的服务器URL，代码如下

xmlHttpReq.open("GET","test.jsp",true);//调用open()方法并采用异步方式

5.因为要做一个异步调用，所以需要注册一个XMLhttpRequest对象将调用的回调事件处理器当它的readyState值改变时调用。当readyState值被改变时，会激发一个readystatechange事件，可以使用onreadystatechange属性来注册该回调事件处理器。

xmlHttpReq.onreadystatechang = RequestCallBack;//设置回调函数

6.使用send方法发送该请求。因为这个请求使用的是HTTP的GET方式，所以可以在不指定参数或使用null参数的情况下调用send方法

    xmlHttpReq.send(null);//因为这个请求使用的是HTTP的GET方式，所以可以在不指定参数或使用null参数

7.当请求状态改变时，XMLHttpRequest对象调用onreadystatechange属性注册的事件处理器。因此，在处理该响应之前，事件处理器应该首先检查readyState的值和Http状态。当请求完成加载readyState值为4并且响应已经成功Http状态值200时，就可以调用一个JavaScript函数来处理该响应内容。

    function RequestCallBack(){//一旦readyState值改变，将会调用该函数
        if(xmlHttpReq.readyState == 4){
            if(xmlHttpReq.status == 200){
                //将xmlHttpReq.responseText的值赋予id为resText的元素
                document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
            }
        }
    }

完整的JavaScript的ajax请求代码如下：

//通过这个函数来异步获取信息
function Ajax(){ 
    var xmlHttpReq = null;  //声明一个空对象用来装入XMLHttpRequest
    if (window.ActiveXObject){//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的
        xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    } 
    else if (window.XMLHttpRequest){//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象
        xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest
    }
    if(xmlHttpReq != null){ //如果对象实例化成功 
        xmlHttpReq.open("GET","test.jsp",true); //调用open()方法并采用异步方式
        xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数
        xmlHttpReq.send(null);  //因为使用get方式提交，所以可以使用null参调用
    }
    function RequestCallBack(){//一旦readyState值改变，将会调用这个函数
        if(xmlHttpReq.readyState == 4){
                if(xmlHttpReq.status == 200){
                    //将xmlHttpReq.responseText的值赋给ID为 resText 的元素
                    document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
                }
        }
    }
}

请求的页面test.jsp代码如下

    test.jsp内容如下：
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%out.println("Hello Ajax!");%>

以上就是一个helloAjax。

4.jquery中的Ajax

jquery对Ajax操作进行了封装，在jquery中 $.ajax()方法属于最底层的方法，第2层是load()、$ .get()和 $.post()方法，第3层是$ .getScript()和$getJSON()方法

首先介绍第二层的方法，因为其使用频率很高

4.1 load方法

1.载入HTML文档

load方法是jquery中最为简单和常用的ajax方法，能载入远程HTML代码并插入DOM中。它的结构如下：
load(url[,data][,callback])
url：String 请求HTML页面的URL地址
data：Object 发送至服务器的key/value数据
callback Function 请求完成时的回调函数，无论请求成功或失败

首先构建一个被load方法加载并追加到页面中的HTML文件，名字为test.html，代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="comment">
 <h6>张三:</h6>
 <p class="para">沙发.</p>
</div>
<div class="comment">
 <h6>李四:</h6>
 <p class="para">板凳.</p>
</div>
<div class="comment">
 <h6>王五:</h6>
 <p class="para">地板.</p>
</div>
</body>
</html>

然后新建一个空白页面，在上面添加两个元素button按钮用来触发ajax事件，id为resText的元素用来显示追加的HTML内容。HTML代码如下：

<input type="button" id="send" value="Ajax获取"/>
    <div class="comment">已有评论：</div>
    <div id="resText"></div>

接下来就可以编写jquery代码了。等DOM加载完毕后，通过单击id为send的按钮来调用load方法，然后将test.html的内容加载到id为resText的元素里。

$(function(){
      $("#send").click(function(){
              $("#resText").load("test.html");//加载test.html页面中的内容到resText元素内
      })
  })

显然，load方法完成了原本很繁琐的工作。开发人员只需要使用jquery选择器为html片段指定目标位置，然后将要加载的文件的URL作为参数传递给load方法即可。

    注意，test.html页面里面并没有添加样式，但现在加载的内容有样式了，这些样式是主页面中添加的，即主页面相应的样式会立即应用到新加载的内容上。

运行ajax的load(test.html)方法后，关键代码如下：

<title></title>

<div id="resText">
<div class="comment">
 <h6>张三:</h6>
 <p class="para">沙发.</p>
</div>
<div class="comment">
 <h6>李四:</h6>
 <p class="para">板凳.</p>
</div>
<div class="comment">
 <h6>王五:</h6>
 <p class="para">地板.</p>
</div>
</div>

注意：通过使用load方法直接加载后的内容中包含了标题。
如果我们不希望有标题，而只把test.html中body标签体中的内容包含进来，该怎么办呢？

2.筛选载入的HTML文档

上个例子是将test.html页面中的内容都加载到id为resText的元素里。如果只需要加载该页面中某些元素，那么可以使用load方法的URL参数来达到目的。
通过为URL参数指定选择符，就可以很方便地从加载过来的HTML文档里筛选出所需要的内容。
load方法的URL参数的语法结构为 url selector。
例如只需要加载test.html页面中class为para的内容，可以使用如下代码完成

$("#resText").load("test.html .para");//把test.html中有class="para"属性的元素全部加载到resText中。
通过运行后，关键结果代码如下：
<div id="resText"><p class="para">沙发.</p><p class="para">板凳.</p><p class="para">地板.</p></div>

3.传递方式

load()方法的传递方式根据参数data来自动指定。
如果没有参数传递，则采用GET方式传递；反之，则会自动转换为POST方式。

//无参数传递，则是GET方式
$("#resText").load("test.jsp",function(){
    //...
});

//有参数传递，则是POST方式
$("#resText").load("test.jsp",{name:"rain",age:"22"},function(){
    //...
});

4.回调参数

对于必须在加载完成后才能继续的操作，load()方法提供了回调函数callback，该函数有3个参数，分别代表请求返回的内容、请求状态和XMLHttpRequest对象

$("#resText").load("test.html"),function(responseText,textStatus,XMLHttpRequest){
    //responseText:请求返回的内容
    //textStatus:请求状态：success、error、notmodified、timeout4种
    //XMLHttpRequest:XMLHttpRequest对象
}

            $("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){
                         alert( $(this).html() );	//在这里this指向的是当前的DOM对象，即 $("#resText")[0]
                         alert(responseText);       //请求返回的内容
                         alert(textStatus);         //请求状态：success，error
                         alert(XMLHttpRequest);     //XMLHttpRequest对象
            });
            //注意：在load方法中，无论Ajax请求是否成功，只要当请求完成后，回调函数就被触发。对应下面将介绍的$.ajax()方法中的complete回调函数。

5.2 $.get()方法和$ .post()方法

load()方法通常用来从web服务器上获取静态的数据文件，然而这并不能体现ajax的全部价值。在项目中，如果需要传递一些参数给服务器中的页面，那么可以使用 $.get或者$ .post()方法，或者是$.ajax()方法

注意： $.get()和$ .post()方法是jquery中的全局函数，而在此之前讲的jquery方法都是对jquery对象进行操作的。

1.$get()方法

使用GET方式进行异步请求
    $.get(url[, data] [, callback] [,type])
url String 请求的HTML页的URL地址
data    Object 发送至服务器的key/value数据会作为QueryString附加到请求URL中
callback    Function 载入成功时回调函数（只有当Response返回状态是success才调用该方法）自动将请求结果和状态传递给该方法。
type    String 服务器端返回内容的格式，包括xml、html、script、json、text和_default

下面是一个评论页面的HTML代码，通过该代码来介绍$.get()方法的使用。

<form id="form1">
    <p>评论:</p>
    <p>姓名: <input type="text" name="username" id="username" /></p>
    <p>内容: <textarea name="content" id="content" ></textarea></p>
    <p><input type="button" id="send" value="提交"/></p>
</form>
<div  class='comment'>已有评论：</div>
<div id="resText" >
</div>
<style>
/*定义全局属性*/
* { 
    margin:0; /*外边距0px*/
    padding:0;/*内边距0px*/
}
/*定义body显示区属性*/
body { 
    font-size:12px;/*字体大小12px*/
}
/*定义评论区显示区样式*/
.comment { 
    margin-top:10px; /*外上边距:10px,每条评论之间相距10px*/
    padding:10px; /*内边距:10px,评论内容距离评论边框的位置10px*/
    border:1px solid #ccc;/*边框大小 边框线条 边框颜色*/
    background:#DDD;/*背景颜色*/
}
/*定义评论区中的标题样式*/
.comment h6 { 
    font-weight:700; /*文本的粗细700。等于bold粗体*/
    font-size:14px;/*字体大小14px*/
}
/*定义段落的样式*/
.para { 
    margin-top:5px; /*外上边距5px*/
    text-indent:2em;/*规定文本块首行的缩进。 2倍字体大小。就是首行缩进两个字符*/
    background:#DDD;/*背景颜色*/
}

</style>

(1).使用参数

首先，需要确定请求页面的URL地址。本例中是向test.jsp页面发出请求。代码如下：

$(function(){
       $("#send").click(function(){
            $.get("test.jsp", data参数, 回调函数);
       })

然后，在提交之前，需要获取姓名和内容的值作为data参数传递给后台。

$(function(){
       $("#send").click(function(){
            $.get("test.jsp", { 
                        username :  encodeURI( $("#username").val() ) , 
                        content :   encodeURI( $("#content").val() ) 
                    }, 
                    回调函数
            );
       })

如果服务器端接收到传递的data数据并成功返回，那么就可以通过回调函数将返回的数据显示到页面上。

$.get()方法的回调函数只有两个参数：
    function(data ,textStatus){
        //data:返回的内容，可以是XML文档、json文件、html片段等等
        //textStatus: 请求状态:success、error、notmodified、timeout4种
    }

data参数代表请求返回的内容，textStatus参数代表请求状态，而且回调函数只有当数据成功返回success后才被调用，这点与load方法不一样

2数据格式

HTML片段
不需要经过处理就可以将新的HTML数据插入到主页面中

test.jsp中的内容如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
  String username = request.getParameter("username");
  String content = request.getParameter("content");
  out.println("<div class='comment'><h6> "+username+" :</h6><p class='para'> "+content+" </p></div>");
%>
    处理HTML格式的jquery代码如下

    $(function(){
       $("#send").click(function(){
            $.get("test.jsp", { 
                        username :  encodeURI( $("#username").val() ) , 
                        content :   encodeURI( $("#content").val() ) 
                    }, function (data, textStatus){
                        $("#resText").html(  decodeURI(data) ); // 把返回的数据添加到页面上
                    }
            );
       })
    这里对请求的数据使用encodeURI对请求参数进行了编码，使用decodeURI对返回的数据进行了解码。主要是解决字符乱码问题。

XML文档

需要对数据进行处理，我们已经介绍过jquery强大的DOM处理能力。处理XML文档与处理HTML文档一样，也可以使用常规的attr()\fand
（）、filter()以及其他方法。

get2.jsp内容如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
  String username = request.getParameter("username");
  String content = request.getParameter("content");
  response.setContentType("text/xml");//设置响应的MINI类型
  out.println("<?xml version='1.0' encoding='UTF-8'?>");
  out.println("<comments>");
  out.println("<comment username='"+username+"'>");
  out.println("<content>"+content+"</content>");
  out.println("</comment>");
  out.println("</comments>");
%>
    处理XML格式的jquery代码如下
    $(function(){
       $("#send").click(function(){
            $.get("get2.jsp", { 
                        username :  encodeURI( $("#username").val() ) , 
                        content :   encodeURI( $("#content").val() ) 
                    }, function (data, textStatus){
                        var username = $(data).find("comment").attr("username");
                        var content = $(data).find("comment content").text();
                        username =  decodeURI(username);
                        content = decodeURI(content);
                        var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
                        $("#resText").html(txtHtml); // 把返回的数据添加到页面上
                    });
       })
    })

返回数据格式为XML文档的过程实现起来比HTML片段要稍微复杂些，但XML文档的可移植性是其他数据格式无法比拟的，因此这种格式提供的数据的重用性将极大提高。例如del.icio.us,Flickr.com和某些开发平台都是以XML格式输出数据，读者可以利用它们提供的API，将获得的内容整合到自己的网站中。不过，XML文档体积相对较大，与其他格式相比，解析和操作它们的速度要慢一些。
JSON文件

get3.jsp代码如下

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
  String username = request.getParameter("username");
  String content = request.getParameter("content");
  out.println("{ \"username\" : '"+username+"' , \"content\" : '"+content+"'}");
%>

因为json数据有严格的格式要求。因此需要对返回的数据进行处理之后，才可以将新的HTML数据添加到主页面中。

$(function(){
       $("#send").click(function(){
            $.get("get3.jsp", { 
                        username :  encodeURI( $("#username").val() ) , 
                        content :   encodeURI( $("#content").val() ) 
                    }, function (data, textStatus){
                        var username = data.username;
                        var content = data.content;
                        username =  decodeURI(username);
                        content = decodeURI(content);
                        var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
                        $("#resText").html(txtHtml); // 把返回的数据添加到页面上
                    },"json");
       })
    })

在代码中，将$.get()方法的第四个参数设置为json，代表期待服务器端返回的数据格式

结论：
HTML片段提供返回数据一般来说最简单。
如果数据需要重用，那么json文件是不错的选择
当远程应用程序未知时，XML文档是明智的选择

2.$.post()方法

$.post()方法与get方法结构和使用方式是一样的，主要讲一下get与post的区别

GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器。当然，在ajax请求中，这种区别对用户是不可见的
GET方式对传输的数据有大小限制，通常不能大于2KB，而是用post方式传递的数据量要比get方式大得多
GET方式请求的数据会被浏览器缓存起来，因此他人就可以从浏览器的历史记录中读取到这些数据，例如账号密码等。在某种情况下，get方式会带来严重的安全性问题而post方式相对来说就可以避免这些问题
GET方式和POST方式传递的数据在服务器端的获取也不同。

如果要编写一些复杂的Ajax程序，那么就要用到jquery中的$.ajax()方法。

5.3 $.getScript()方法和$ .getJson()方法

1.$.getScript()

有时候，在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的。
因此可以在需要哪个JavaScript文件时，动态地创建script标签。代码如下：

$(document.createElement("script")).attr("src","test.js").appendTo("head");
    或者
    $("<script type='text/javascript' src= 'test.js' />").appendTo("head");

但是这种方式并不理想，为此，jQuery提供了$.getScript()方法来直接加载.js文件，与加载一个HTML片段代码一样简单方便，并且不需要对JavaScript文件进行处理，JavaScript文件会自动执行。
代码如下

$(function(){//网页加载时运行
        $('#send').click(function() {
             $.getScript('test.js');//动态获取test.js文件，并执行该文件的内容
        });
   })

test.js中的代码

var comments = [  {  "username": "张三",   "content": "沙发." },  
            {    "username": "李四",   "content": "板凳." },  
            {    "username": "王五",    "content": "地板."  }];
          var html = '';
          $.each( comments , function(commentIndex, comment) {
             html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
      })
      $('#resText').html(html);

与其他Ajax方法一样， $.getScript方法也有回调函数，它会在JavaScript文件成功载入后运行。例如想载入jQuery官方颜色动画插件jquery.color.js,成功后给元素绑定颜色变化动画,就可以用到$ .getScript()方法的回调函数。

$.getScript('jquery.color.js',function(){
                  $("<p>加载JavaScript完毕</p>").appendTo("body");
                  $("#go").click(function(){
                       $(".block").animate( { backgroundColor: 'pink' }, 1000)
                                  .animate( { backgroundColor: 'blue' }, 1000);
                  });
             });

* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
.block{width:80px;height:80px;background:#DDD;}

<button id="go">运行</button>
<div class="block"></div> 

    2.$.getJSON()
    $>getJSON()方法用于加载JSON文件，与$.getScript()方法的用法相同
    $(function(){
        $("#send").click(function(){
            $.getJSON("test.json");//加载json文件
        });
    })

当单击加载按钮后，网页看不到任何效果。虽然加载了json文件，但并没有告诉JavaScript对返回的数据如何处理。因此，jquery提供了回调函数，在回调函数中处理返回的数据。
代码如下：

$(function(){
        $("#send").click(function(){
            $.getJSON("test.json",function(data){
                //data:返回的数据
            });//加载json文件,并处理返回的data数据
        });
    })
    test.json文件内容
    [  {  "username": "张三",   "content": "沙发." },  
            {    "username": "李四",   "content": "板凳." },  
            {    "username": "王五",    "content": "地板."  }]

可以在函数中通过data变量来遍历响应的数据，也可以使用迭代方式为每个项构建相应的HTML代码。虽然这里可以使用传统的for循环来实现，但是这里将jquery，那么还是使用jquery中的方法。
$.each()用于遍历对象和数组
它是一个全局函数，不操作jquery对象
而是以一个数组或对象作为第一个参数，以一个回调函数作为第二个参数。回调函数拥有两个参数，第一个为对象的成员或或数组的索引，第2个为对应变量或内容。

$(function(){
        $('#send').click(function() {
             $.getJSON('test.json', function(data) {//返回数据成功后
                 $('#resText').empty();//清空id为resText中的内容
                  var html = '';//构建html
                  $.each( data  , function(commentIndex, comment) {
                      html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
                  })
                 $('#resText').html(html);/将构建好的html添加到resText中
            })
       })
   })

不仅如此，还能通过使用JSONNP形式的回调函数来加载其他网站的JSON数据。

5.4$.ajax()方法

jquery最底层的ajax实现

结构
$.ajax(options)
该方法只有一个参数，但在这个对象里包含了该方法所需要的请求设置以及回调函数等信息，参数以key/value的形式存在，所有参数都是可选的
参数表
url String 默认为当前页地址 发送请求的地址
type String 请求方式 默认GET。
timeout Number 设置请求超时时间。单位毫秒 此设置将覆盖$.ajaxSetup()方法的全局设置
data object或String 发送到服务器的数据。
dataType String 预期服务器返回的数据类型
beforeSend Function 发送请求前可以修改XMLHttpRequest对象的函数
complete Function 请求完成后调用的回调函数。请求成功或失败都调用
success Function 请求成功后调用的回调函数
error Function 请求失败时调用的函数
global Boolean 默认为true 表示是否触发全局ajax事件。

例如：可以使用下面的jquery代码代替$.getScript()

    $.ajax({
        type:"GET",
        url:"test.js",
        dataType:"script"
    })

6.序列化元素

    其作用是：将页面要提交的数据按照URL规定的格式对请求中的查询字符串按照URL规定的格式进行自动打包。

1.serialize()方法

$(function(){
       $("#send").click(function(){
            $.get("get3.jsp", { 
                            username :  encodeURI( $("#username").val() ) , 
                        content :   encodeURI( $("#content").val() ) 
                    }, function (data, textStatus){
                        var username = data.username;
                        var content = data.content;
                        username =  decodeURI(username);
                        content = decodeURI(content);
                        var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
                        $("#resText").html(txtHtml); // 把返回的数据添加到页面上
                    },"json");
       })
    })

这种方式必须将自段的值逐个添加到dada参数中。
如果表单元素越来越复杂，使用这种方式在增大工作量的同时也使表单缺乏弹性。因此可以使用jquery的serialize()方法进行简化。
作用于一个jquery对象，它能够将DOM元素内容序列化为字符串，用于ajax请求。通过使用serlialize方法，可以改为

 $("#send").click(function(){
            $.get("get3.jsp", $("#form1").serialize(), function (data, textStatus){
                        var username = data.username;
                        var content = data.content;
                        username =  decodeURI(username);
                        content = decodeURI(content);
                        var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
                        $("#resText").html(txtHtml); // 把返回的数据添加到页面上
                    },"json");
       })
    })

当单击提交按钮后，也能达到同样的效果。即使在表单中再增加字段，脚本仍然能够使用，并且不需要做其他多余的工作。

serialize还会自动编码

serialize不光只有表单能够使用它，其他选择器选取的元素也能使用它。

$(":checkbox,:radio").serialize();
    把复选框和单选框的值序列化为字符串形式，只会将选中的值序列化

2.serializeArray()方法

将DOM元素序列化后，返回JSON格式的数据

var fields = $(":checkbox,:radio").serializeArray();
    console.log(fields);//用FireBug输出

    //既然是一个对象，那么就可以使用$.each函数对数据进行迭代输出
    $.each(fields,function(i,field){
        $("#results").append(field.value + ",");
    });

3.$.param()方法

它是serialize方法的核心。用来对一个数组或对象按照key、value进行序列化

var obj = {a:1,b:2,c:3};
    var k = $.param(obj);
    aler(k);//输出a=1&b=2&c=3

7.jQuery中的Ajax全局事件

当ajax请求开始时，会触发ajaxStart()方法的回调函数；当ajax请求结束时，会触发ajaxstop方法的回调函数。
这些方法都是全局的方法，因此无论创建它们的代码位于何处，只要有ajax请求发生，就会触发它们。


    //共用这2个全局的ajax事件
       $("#loading").ajaxStart(function(){
          $(this).show();
       });
       $("#loading").ajaxStop(function(){
          $(this).hide();
       });

ajaxComplete()Ajax请求完成时执行的函数
ajaxError() ajax请求发送错误时执行的函数，捕捉到的错误可以作为最后一个参数传递
ajaxSend() ajax请求发送前执行的函数
ajaxSuccess() ajax请求成功时执行的函数

如果想使某个ajax请求不受全局方法的影响，那么可以在使用$.ajax方法时，将global参数设置为false

向着阳光奔跑的少年

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
jQuery与Ajax的应用

jQuery与Ajax的应用Ajax全称为 Asynchronous javaScript and XML 异步javascript和XML。它并不是指一种单一的技术，而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体。1.Ajax的优势和不足1.1Ajax的优势1.不需要插件支持Ajax不需要任何浏览器插件，就可以被绝大多数主流浏览器所支持，用户只需要允许JavaScript在浏览器
复制链接

扫一扫