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 += "邮箱：123@163.com<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 += "邮箱：345@163.com<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": "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>
<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": "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>";
})
$("#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 />邮箱：@.com</div>
感谢您的阅读，坚持每天进步一点点，离成功就更新一步；希望文章对您有所帮助；
最近有个妹子弄的一个关于扩大眼界跟内含的订阅号，每天都会更新一些深度内容，在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣)，当然可以关注后输入：github 会有我的微信号，如果有问题你也可以在那找到我；当然不感兴趣无视此信息；
Jquery重新学习之八[Ajax运用总结B]的更多相关文章
- Jquery重新学习之七[Ajax运用总结A]
Jquery中Ajax的运用是另外一个重点,平时项目经常会用它进行一些异步操作:其核心是通过XMLHttpRequest对象以一种异步的方式,向服务器发送数据请求,并通过该对象接收请求返回的数据,从而 ...
- jQuery源代码学习之八——jQuery属性操作模块
一.jQuery属性模块整体介绍 jQuery的属性操作模块分四个部分:html属性操作,dom属性操作,类样式操作,和值操作. html属性操作(setAttribute/getAttribute) ...
- jquery基础学习之AJAX篇（五）
理解不深,只知道这么用 jquery 中ajax的请求方法 $.ajax({ url:‘http://...’, //请求网址 type:'GET', //请求方法 success:function( ...
- [译]脱离jQuery，使用原生Ajax
脱离jQuery,使用原生Ajax 标签: Ajax translate 英文出处:<A Guide to Vanilla Ajax Without jQuery> 翻译: 刘健超 J.c ...
- 嘿嘿。今天学习了AJAX的几个方法
原文:嘿嘿.今天学习了AJAX的几个方法 今天学习了AJAX的几个方法,其实我很早在公司实习的时间就认识了它,但是对它一无所知,也并没有去学习它,今天学习它让我感到很兴奋因为重新了解了它,嘿嘿,下面就 ...
- 第26篇 jQuery 快速学习下
前面说了下jQuery了,大部分说的都是选择器和过滤器方面的东西,这个写完后,后面就说下剩下的东西了,离目标越来越近了.下面就说说这些东西 事件 传统比较 在js中说了原生js的绑定事件,基本的形式如 ...
- jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...
- 第十九篇 jQuery初步学习
jQuery 初步学习 jQuery可以理解为是一种脚本,需要到网上下载,它是一个文件,后缀当然是js的文件,它里面封装了很多函数方法,我们直接调用即可,就比方说,我们用JS,写一个显示与隐藏,通 ...
- jQuery与JavaScript与ajax三者的区别与联系（转）
原文链接: https://blog.csdn.net/qq_43154385/article/details/85003484 通过阅读,对于三者关系有一个比较清晰的认知,对于后期深入学习大有裨益 ...
随机推荐
- 【筛法求素数】【推导】【组合数】UVALive - 7642 - Prime Distance
题意:n个格子,m个球,让你把球放入某些格子里,使得所有有球的格子之间的距离(abs(i-j))均为素数 ,让你输出方案数. 只占一个格子或者两个格子显然可行. 占有三个格子的情况下,则必须保证其中两 ...
- [bzoj1023][SHOI2008]cactus 仙人掌图 (动态规划)
Description 如果某个无向连通图的任意一条边至多只出现在一条简单回路(simple cycle)里,我们就称这张图为仙人图(cactus).所谓简单回路就是指在图上不重复经过任何一个顶点的回 ...
- bzoj1715 虫洞
Description John在他的农场中闲逛时发现了许多虫洞.虫洞可以看作一条十分奇特的有向边,并可以使你返回到过去的一个时刻(相对你进入虫洞之前).John的每个农场有M条小路(无向边)连接着N ...
- CROC 2016 - Elimination Round (Rated Unofficial Edition) A. Amity Assessment 水题
A. Amity Assessment 题目连接: http://www.codeforces.com/contest/655/problem/A Description Bessie the cow ...
- UESTC 2015dp专题 G 邱老师玩游戏 背包dp
邱老师玩游戏 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/contest/show/65 Descr ...
- JAVA容器-浅谈HashMap的实现原理
概述 HashMap是通过数组+链表的方式实现的,由于HashMap的链表也是采用数组方式,我就修改直接利用LinkedList实现,简单模拟一下. 1.Key.Value的存取方式. 2.HashM ...
- appium+python自动化98-非select弹出选择框定位解决
前言 遇到问题:document.getElementsByClassName(...)[0] is undefined 选择框如果是select标签的,可以直接用select专用的方法去定位点击操作 ...
- [译林军] 译~CrossBridge 简介
本文由 9ria 社区译林军翻译,转载请注明出处.加入译林军 :http://bbs.9ria.com/thread-286920-1-1.html CrossBridge 是 Adobe Fla ...
- C#类和结构体的异同点简单总结
类和结构的异同点?异: 1.关键字不同 一个是class,一个是struct 2.类型不同,一个是引用类型,一个是值类型(一个堆区,一个栈区) 3.成员不同,结构体没有默认的构造函数 ...
- 深入解析OkHttp3
OkHttp是一个精巧的网络请求库,有如下特性: 1)支持http2,对一台机器的所有请求共享同一个socket 2)内置连接池,支持连接复用,减少延迟 3)支持透明的gzip压缩响应体 4) ...