<!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>getScript</title>
<script type="text/javascript" src="https://www.jb51.net/JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="https://www.jb51.net/JS/getScript.js"></script>
<style type="text/css">
body{ padding:30px; }
</style>
</head>
<body>
<h1>使用getScript()方法异步加载JavaScript文件</h1>
<input type="button" value="Button" />
</body>
</html>
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="https://www.jb51.net/JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="https://www.jb51.net/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
复制代码 代码如下:
$(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>");
});
});
});
Register.aspx
复制代码 代码如下:
<%@ 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]);
复制代码 代码如下: