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

<!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=utf-8" />
<title>getJSON</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/getJSON.js"></script>
<style type="text/css">
body{ padding:20px; }
#peoples{ background:#999; border:solid 2px #333; width:300px; }
#peoples td{ padding:5px; }
#peoples thead{ background:#555; color:#FFF; font-weight:700; font-size:16px; }
#peoples tbody{ font-size:13px;background:#fff; }
</style>
</head>
<body>
<table cellspacing="1">
<thead>
<tr><td>Name</td><td>Age</td><td>Sex</td></tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>

getJSON.js

复制代码代码如下:

$(document).ready(function(){
/* 异步请求，载入 JSON 数据 */
$.getJSON("http://localhost:2154/Web/PeopleList.aspx",
  function(data){
   /* 遍历请求结果 */
   $.each(data,
    function(index, p){
     var html = "<tr><td>" + p.name + "</td><td>" + p.age +
     "</td><td>" + (p.isMale ? "male" : "female") + "</td></tr>"
     $("#peoples>tbody").append(html);
    });
  });
});

PeopleList.aspx

复制代码代码如下:

<%@ Page Language="C#" %>
[{
"name" : "David li",
"age" : 61,
"isMale" : true
},{
"name" : "Michael Clinton",
"age" : 53,
"isMale" : true
},{
"name" : "Brook Ann",
"age" : 23,
"isMale" : false
},{
"name" : "Mary Johnson",
"age" : 35,
"isMale" : false
},{
"name" : "Elizabeth Jones",
"age" : 33,
"isMale" : false
},{
"name" : "James Smith",
"age" : 25,
"isMale" : true
}]

8：$.getScript()方法
var xmlReq = $.getScript(url, [callback]);

复制代码代码如下:

getScript.js

复制代码代码如下:

$(document).ready(function(){
$("#input").click(function(){
  $.getScript("Test.js", function(data){
   showMsg();
  });
});
});

Test.js

复制代码代码如下:

function showMsg(){
alert("This is Message");
}

9：序列化表单数据
jQuery为了解决参数很多的问题，提供了序列化的方法简化对表单数据的收集和格式化。

复制代码代码如下:

<!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>serialize</title>
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JS/serialize.js"></script>
<style type="text/css">
body{ padding:20px; }
</style>
</head>
<body>
<table>
<tbody>
<form onsubmit="return false;" >
<tr><td>Username:</td><td><input /></td></tr>
<tr><td>Age:</td><td><input /></td></tr>
<tr><td>Sex:</td><td>
<select>
    <option value="true">男</option>
        <option value="false">女</option>
    </select></td></tr>
<tr><td>Email:</td><td><input /></td></tr>
<tr><td>Details:</td><td><textarea></textarea></td></tr>
<tr><td></td><td><button>Submit</button></td></tr>
</form>
</tbody>
</table>
</body>
</html>

serialize.js

复制代码代码如下: