Jquery重新学习之八[Ajax运用总结B]
上一篇简单介绍普通javascript以及Jquery的AJAX方法,其中Jquery.ajax()是功能比较强悍的底层方法,可以更多地关注实现过程中的细节;除Jquery.ajax()方法外,Jquery还提供其它几个比较简单但作用有限的方法;包含Jquery全局函数Jquery.get()、Jquery.post()、Jquery.getJSON()、Jquery.getScript()和load()方法;
1:Jquery.get(url,[data],[callback],[type]) 通过远程HTTP GET请求载入信息,简单的GET请求功能以取代复杂Jquery.ajax()中的GET方式,如果需要在出错时执行函数,请使 用Jquery.ajax();其中参数如下:url:待载入页面的URL地址。data:待发送 Key/value 参数(可选)。callback:载入成功时回调函数(可选)。type:返回内容格式,xml, html, script, json, text, _default(可选)。
实例代码:
<head> <title>$.get发送请求</title> <script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"> </script> <script type="text/javascript"> $(function() { $("#Button1").click(function() { //打开文件,并通过回调函数返回服务器响应后的数据 $.get("UserInfo.aspx", { name: encodeURI($("#txtName").val()) }, function(data) { $("#divTip") .empty() //先清空标记中的内容 .html(data); //显示服务器返回的数据 }) }) }) </script> </head> <body> <div class="divFrame"> <div class="divTitle"> <span>姓名:</span> <input id="txtName" type="text" class="txt" /> <input id="Button1" type="button" class="btn" value="请求数据" /> </div> <div class="divContent"> <div id="divTip"></div> </div> </div> </body> </html> 其中UseInfo.aspx页面代码如下: string strName = System.Web.HttpUtility.UrlDecode(Request["name"]);//解码姓名字符 string strHTML = "<div class=‘clsShow‘>"; //初始化保存内容变量 if (strName == "小明") { strHTML += "姓名:小明<br>"; strHTML += "性别:男<br>"; strHTML += "邮箱:[email protected]<hr>"; } strHTML += "</div>"; Response.Write(strHTML);
2:Jquery.post(url,[data],[callback],[type]) 通过远程HTTP POST请求载入信息,简单的GET请求功能以取代复杂Jquery.ajax()中的POST方式,全局函数Jquery.post()跟Jquery.get()在本质上没有太大的区别,所不同的是,Get方式适合传递数据量较大的数据,同时,其请求的历史信息会保存在浏览器的缓存中,有一定的安全风危;Post方式就不会存在这两方面的不足;,如果需要在出错时执行函数,请使用Jquery.ajax();其中参数如下:url:待载入页面的URL地址。data:待发送 Key/value 参数(可选)。callback:载 入成功时回调函数(可选)。type:返回内容格式,xml, html, script, json, text, _default(可选)。
实例代码:
<head> <title>$.post发送请求</title> <script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"> </script> <script type="text/javascript"> $(function() { $("#Button1").click(function() { //打开文件,并通过回调函数返回服务器响应后的数据 $.post("User_Info.aspx", { name: encodeURI($("#txtName").val()), sex: encodeURI($("#selSex").val()) }, function(data) { $("#divTip") .empty() //先清空标记中的内容 .html(data); //显示服务器返回的数据 }) }) }) </script> </head> <body> <div class="divFrame"> <div class="divTitle"> <span>姓名:</span> <input id="txtName" type="text" class="txt" /> <select id="selSex" style="height:22px;margin-right:3px"> <option value="">选性别</option> <option value="男">男</option> <option value="女">女</option> </select> <input id="Button1" type="button" class="btn" value="请求" /> </div> <div class="divContent"> <div id="divTip"></div> </div> </div> </body> </html> 其中User_Info.aspx代码如下: string strName = System.Web.HttpUtility.UrlDecode(Request["name"]);//解码姓名字符 string strSex = System.Web.HttpUtility.UrlDecode(Request["sex"]);//解码性别字符 string strHTML = "<div class=‘clsShow‘>"; //初始化保存内容变量 if (strName == "小明" && strSex=="男") { strHTML += "姓名:小明<br>"; strHTML += "性别:男<br>"; strHTML += "邮箱:[email protected]<hr>"; } strHTML += "</div>"; Response.Write(strHTML);
3:jQuery.getJSON(url, [data], [callback])通过 HTTP GET 请求载入 JSON 数据。其方法可以专门快速获得JSON文件的内容,其中参数如下:url:待载入页面的URL地址。 data:待发送 Key/value 参数(可选)。callback:载入成功时回调函数(可选)。
实例如下:
<head> <title>getJSON函数获取数据</title> <script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"> </script> <script type="text/javascript"> $(function() { $("#Button1").click(function() { //打开文件,并通过回调函数处理获取的数据 $.getJSON("UserInfo.json", function(data) { $("#divTip").empty(); //先清空标记中的内容 var strHTML = ""; //初始化保存内容变量 $.each(data, function(InfoIndex, Info) { //遍历获取的数据 strHTML += "姓名:" + Info["name"] + "<br>"; strHTML += "性别:" + Info["sex"] + "<br>"; strHTML += "邮箱:" + Info["email"] + "<hr>"; }) $("#divTip").html(strHTML); //显示处理后的数据 }) }) }) </script> </head> <body> <div class="divFrame"> <div class="divTitle"> <input id="Button1" type="button" class="btn" value="获取数据" /> </div> <div class="divContent"> <div id="divTip"></div> </div> </div> </body> </html> 其中UserInfo.json文件如下: [ { "name": "小明", "sex": "男", "email": "[email protected]" }, { "name": "小丽", "sex": "女", "email": "[email protected]" } ]
4:jQuery.getScript(url, [callback]) 通过 HTTP GET 请求载入并执行一个 JavaScript 文件,jQuery.getScript()不仅可以像加载页面片段一样轻松地注入脚本,而且所注入的脚本会自动执行,大大提高了页面的执行效率。其中参数如下:url:待载入 JS 文件地址。callback:成功载入后回调函数(可选)。
实例代码(把数据存放在JS的数组中,加载JS文件,输出数组的内容):
<head> <title>getScript函数获取数据</title> <script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"> </script> <script type="text/javascript"> $(function() { $("#Button1").click(function() { //按钮单击事件 //打开已获取返回数据的文件 $.getScript("UserInfo.js"); }) }) </script> </head> <body> <div class="divFrame"> <div class="divTitle"> <input id="Button1" type="button" class="btn" value="获取数据" /> </div> <div class="divContent"> <div id="divTip"></div> </div> </div> </body> </html> 其中UserInfo.js代码如下: var data = [ { "name": "小明", "sex": "男", "email": "[email protected]" }, { "name": "小丽", "sex": "女", "email": "[email protected]" } ]; var strHTML = ""; $.each(data, function() { strHTML += "姓名:" + this["name"] + "<br>"; strHTML += "性别:" + this["sex"] + "<br>"; strHTML += "邮箱:" + this["email"] + "<hr>"; }) $("#divTip").html(strHTML);
5:load(url, [data], [callback])方法与上面其四个不同的它不是全局函数,载入远程 HTML 文件代码并插入至 DOM 中,其中参数如下:url:待装入 HTML 网页网址。data:发 送至服务器的 key/value 数据,在jQuery 1.3中也可以接受一个字符串了。callback:载入成功时回调函数。注意:参数url还可以用于过滤页面中的某类别的元素,如代码"$. (‘#divTip‘).load("b.html .divContent")",则表示获取页面b.html中类别名为"divContent"的全部元素;因为浏览器在获得数据时经常会有缓存,所以在请求时可以增加一个时 间的参数避开这个问题:"b.html?date="+Date();
实例代码:
<head> <title>load()方法实现Ajax功能</title> <script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"> </script> <script type="text/javascript"> $(function() { $("#Button1").click(function() { $("#divTip").load("b.html"); }) }) </script> </head> <body> <div class="divFrame"> <div class="divTitle"> <input id="Button1" type="button" class="btn" value="获取数据" /> </div> <div class="divContent"> <div id="divTip"></div> </div> </div> </body> </html> 其中b.html代码如下: <div class="clsShow">姓名:小明<br />性别:男<br />邮箱:354@163.com</div>
感谢您的阅读,坚持每天进步一点点,离成功就更新一步;希望文章对您有所帮助;
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。