jQuery之ajax技术的详细介绍(5)


<!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]);

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdggxs.html