脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Jquery重新学习之八[Ajax运用总结B]，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
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) {
$("#pTip")
.empty() //先清空标记中的内容
.html(data); //显示服务器返回的数据
})
})
})
</script>
</head>
<body>
<p class="pFrame">
<p class="pTitle">
<span>姓名：</span>
<input id="txtName" type="text" class="txt" />
<input id="Button1" type="button"
class="btn" value="请求数据" />
</p>
<p class="pContent">
<p id="pTip"></p>
</p>
</p>
</body>
</html>
其中UseInfo.aspx页面代码如下：
string strName = System.Web.HttpUtility.UrlDecode(Request["name"]);//解码姓名字符
string strHTML = "<p class='clsShow'>"; //初始化保存内容变量
if (strName == "小明")
{
strHTML += "姓名：小明<br>";
strHTML += "性别：男<br>";
strHTML += "邮箱：123@163.com<hr>";
}
strHTML += "</p>";
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) {
$("#pTip")
.empty() //先清空标记中的内容
.html(data); //显示服务器返回的数据
})
})
})
</script>
</head>
<body>
<p class="pFrame">
<p class="pTitle">
<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="请求" />
</p>
<p class="pContent">
<p id="pTip"></p>
</p>
</p>
</body>
</html>
其中User_Info.aspx代码如下：
string strName = System.Web.HttpUtility.UrlDecode(Request["name"]);//解码姓名字符
string strSex = System.Web.HttpUtility.UrlDecode(Request["sex"]);//解码性别字符
string strHTML = "<p class='clsShow'>"; //初始化保存内容变量
if (strName == "小明" && strSex=="男")
{
strHTML += "姓名：小明<br>";
strHTML += "性别：男<br>";
strHTML += "邮箱：345@163.com<hr>";
}
strHTML += "</p>";
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) {
$("#pTip").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
$.each(data, function(InfoIndex, Info) { //遍历获取的数据
strHTML += "姓名：" + Info["name"] + "<br>";
strHTML += "性别：" + Info["sex"] + "<br>";
strHTML += "邮箱：" + Info["email"] + "<hr>";
})
$("#pTip").html(strHTML); //显示处理后的数据
})
})
})
</script>
</head>
<body>
<p class="pFrame">
<p class="pTitle">
<input id="Button1" type="button"
class="btn" value="获取数据" />
</p>
<p class="pContent">
<p id="pTip"></p>
</p>
</p>
</body>
</html>
其中UserInfo.json文件如下：
[
{
"name": "小明",
"sex": "男",
"email": "344@163.com"
},
{
"name": "小丽",
"sex": "女",
"email": "34@163.com"
}
]
复制代码
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>
<p class="pFrame">
<p class="pTitle">
<input id="Button1" type="button"
class="btn" value="获取数据" />
</p>
<p class="pContent">
<p id="pTip"></p>
</p>
</p>
</body>
</html>
其中UserInfo.js代码如下：
var data = [
{
"name": "小明",
"sex": "男",
"email": "333@163.com"
},
{
"name": "小丽",
"sex": "女",
"email": "li@163.com"
}
];
var strHTML = "";
$.each(data, function() {
strHTML += "姓名：" + this["name"] + "<br>";
strHTML += "性别：" + this["sex"] + "<br>";
strHTML += "邮箱：" + this["email"] + "<hr>";
})
$("#pTip").html(strHTML);
复制代码
5：load(url, [data], [callback])方法与上面其四个不同的它不是全局函数，载入远程 HTML 文件代码并插入至 DOM 中，其中参数如下：url:待装入 HTML 网页网址。data:发 送至服务器的 key/value 数据，在jQuery 1.3中也可以接受一个字符串了。callback:载入成功时回调函数。注意：参数url还可以用于过滤页面中的某类别的元素，如代码"$. ('#pTip').load("b.html .pContent")",则表示获取页面b.html中类别名为"pContent"的全部元素；因为浏览器在获得数据时经常会有缓存，所以在请求时可以增加一个时 间的参数避开这个问题："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() {
$("#pTip").load("b.html");
})
})
</script>
</head>
<body>
<p class="pFrame">
<p class="pTitle">
<input id="Button1" type="button"
class="btn" value="获取数据" />
</p>
<p class="pContent">
<p id="pTip"></p>
</p>
</p>
</body>
</html>
其中b.html代码如下：
<p class="clsShow">姓名：小明<br />性别：男<br />邮箱：354@163.com</p>
复制代码
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-Jquery重新学习之八[Ajax运用总结B]全部内容，希望文章能够帮你解决javascript代码实例教程-Jquery重新学习之八[Ajax运用总结B]所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。