jQuery之ajax技术的详细介绍(5)_H5之家 - 中国HTML5教程资源分享第一站

$(document).ready(function(){
$("button[name='btnSubmit']").click(function(){
  $.post("http://localhost:2154/Web/Register.aspx",
   $("form").serialize(), //序列化表单数据
   function(data){
    $("table tbody").append("<tr><td colspan=2>" + data + "</td></tr>");
   });
  });
});

复制代码代码如下:

<%@ Page Language="C#" %>
Username:<%= Request["username"] %>
<br />
Age:<%= Request["age"] %>
<br />
IsMale:<%= Request["isMale"]%>
<br />
Email:<%= Request["email"]%>
<br />
Details:<%= Request["details"]%>

10：serializeArray()方法
该方法将页面表单序列化成一个JSON结构的对象，该对象以"键/值"对集合的形式封装了表单里的所有元素值。
这里注意的是该方法返回的是一个JSON对象，而不是JSON字符串
该JSON对象结构如下：

复制代码代码如下:

       [
           {"name": "name1" , "value": "value1"},
           {"name": "name2" , "value": "value2"},
           {"name": "name3" , "value": "value3"}
       ]
     var jsonData = $("form").serializeArray();
     var textName = jsonData[0].name;
     var textValue = jsonData[0].value;

11：设置全局Ajax默认选项
在应用中，经常编写大量的Ajax方法来实现各种功能，每次都在$.ajax()方法中设置大量参数，非常不方便，jQuery提供了$.ajaxSetup()方法，可以设置
全局的Ajax默认参数项。
$.ajaxSetup([options]);

复制代码代码如下:

$.ajaxSetup({
     url: 'Test.html',
     type: 'POST',
     global: false, //禁止触发全局事件
     dataType: 'json',
     error: function(xhr, textStatus, errorThrown) {
           alert(textStatus);
      }
     });

12：jQuery全局事件
ajaxComplete(callback); //请求完成时触发该事件
ajaxError(callback); //请求出现错误时触发该事件
ajaxSend(callback); //请求发送前触发该事件
ajaxStart(callback); //请求开始时触发该事件
ajaxStop(callback); //请求结束时触发该事件
ajaxSuccess(callback); //请求成功时触发该事件
ajaxStart()方法和ajaxStop方法的事件处理程序是一个无参的函数，其余都可以有3个参数，语法格式如下：

复制代码代码如下:

       function(event, XHR, settings) {
               event是触发的事件对象
               XHR是XMLHttpRequest对象
              settings是Ajax请求配置参数
         }

复制代码代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>AjaxGlobalEvent</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/AjaxGlobalEvent.js"></script>
<style type="text/css">
body{ padding:20px; }
textarea{ width:350px; height:120px; }
#loading{ background-color:#eee; border:solid 1px #999; margin:5px 0 10px; padding:5px; font-size:13px; }
</style>
</head>
<body>
<div></div>
<button>Load</button>
</body>
</html>

AjaxGlobalEvent.js

复制代码代码如下:

$(document).ready(function(){
$("#show").ajaxStart(function(){
  $(this).append("<p>Run ajaxStart</p>");
});
$("#show").ajaxStop(function(){
  $(this).append("<p>Run ajaxStop</p>");
});

$("#show").ajaxComplete(function(){
  $(this).append("<p>Run ajaxComplete</p>");
});

$("#show").ajaxError(function(){
  $(this).append("<p>Run ajaxError</p>");
});

$("#show").ajaxSend(function(){
  $(this).append("<p>Run ajaxSend</p>");
});

$("#show").ajaxSuccess(function(){
  $(this).append("<p>Run ajaxSuccess</p>");
});
$("button[name='btnLoad']").click(function(){
  $.get("http://www.sohu.com");
});
});

您可能感兴趣的文章: