Ajax运用总结B
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 />邮箱：354@163.com</div>
感谢您的阅读，坚持每天进步一点点，离成功就更新一步；希望文章对您有所帮助；
Ajax运用总结B的更多相关文章
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- Ajax及跨域
概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...
- 一个粗心的Bug，JSON格式不规范导致AJAX错误
一.事件回放 今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...
- ABP文档 - Javascript Api - AJAX
本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...
- ajax异步请求
做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...
- 调用AJAX做登陆和注册
先建立一个页面来检测一下我们建立的用户名能不能用,看一下有没有已经存在的用户名吗 可以通过ajax提示一下 $("#uid").blur(function(){ //取用户名 va ...
- Ajax 概念 分析 举例
Ajax是结合了访问数据库,数据访问,Jquery 可以做页面局部刷新或者说是页面不刷新,我可以让页面不刷新,仅仅是数据的刷新,没有频繁的刷页面,是现在比较常用的一种方式做页面那么它是怎么实现页面无刷 ...
- ajax
常见的HTTP状态码状态码:200 请求成功.一般用于GET和POST方法 OK301 资源移动.所请求资源移动到新的URL,浏览器自动跳转到新的URL Moved Permanently304 未修 ...
- 学习笔记之MVC级联及Ajax操作
由于刚转型到MVC,MVC的架构模式很多不是很清楚,比如今天就想做个级联的操作,因为之前的ASP.NET的方式是通过:控件-->添加事件-->后台编写级联事件进行触发,但是这个MVC就不同 ...
- javascript表单的Ajax 提交插件的使用
Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...
随机推荐
- MFC属性页对话框
属性页对话框 分类 分页和引导 类 CPropertyPage-父亲CDialog类别,所谓的属性页或网页对话框. CPropertySheet-父类是CWnd,称为属性表单. 一个完整的属性页对话框 ...
- 微软发布Win10开发者指南视频
假设你是一个开发者,推荐你看看微软今天推出了一系列视频,标题是Win10开发人员指南,总体长度6时,多达22章内容,介绍很广泛.其实,即使你是编程新手或仅有兴趣,也值得一看. 开发人员Jerry Ni ...
- 关于ACM，关于CSU
原文地址:http://tieba.baidu.com/p/2432943599 前言: 即将进入研二,ACM的事情也渐渐远去,记忆终将模糊,但那段奋斗永远让人热血沸腾.开个贴讲讲ACM与中南的故事, ...
- 三星Galaxy s4(i9505)得到完美root权限教程
三星Galaxy s4(i9505)完美获取root权限教程 论坛上贴吧上关于三星s4 i9505 root的介绍有非常多,方法多种多样.今天小编来介绍一种使用root软件来实现三星i9505一键ro ...
- 使用pfile 启动oracle 实例时，启动失败---db_recovery_file_dest參数值在os上不存在。
[oracle@vm22 ~]$ export ORACLE_SID=orcl [oracle@vm22 ~]$ sqlplus / as sysdba SQL*Plus: Release 10.2. ...
- 零基Github Page个人博客建立教程无限的自由流动
本文介绍了什么是Github Page.以及如何使用Github Page搭建一个免费的.无限流量的个人博客并绑定独立域名. 一.前言 1.1 为什么要用Github Page搭建博客 借用阮一峰老大 ...
- oracle_表分区
一. 分区表理论知识 Oracle提供了分区技术以支持VLDB(Very Large DataBase).分区表通过对分区列的判断,把分区列不同的记录,放到不同的分区中.分区完全对应用透明. Orac ...
- 【SSH三框架】Struts2第一章的基础：第一次写Struts2规划
今年八月,当已经SSH三架完成学业.然后,他感动Android开展.三个框架已经很长的时间做无用的东西.所以,如果你想花三四天的时间来复习一下,写在博客. 附带SSH整个jar包网盘下载:http:/ ...
- sgu 194 被动散热器具有最大流量的上限和下限（最大流量模板dinic加上优化）
模板类型的题详细參考国家集训队论文:http://wenku.baidu.com/view/0f3b691c59eef8c75fbfb35c.html 參考博客:http://blog.csdn.ne ...
- Android锁定EditText内容和随机生成验证码
昨天写了个小Demo,实现了随机生成验证码,和锁定EditText两个小功能,先看一下效果图: 锁定EditText在我们不须要用户编辑EditText内容的时候能够用到,实现还是非常easy的,一行 ...