jQuery - 9.Ajax
9.2.4 $.getScript()方法和$.getJson()方法
2.serializeArray() 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。
3.$.param() 用来对一个数组或者对象按key\value进行序列化
9.2.6 Jquery中的Ajax全局事件: ajaxStart(callback),ajaxStop(callback)
9.1 Ajax 的 XMLHttpRequest 对象
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
var xmlHttpReq = null;
function Ajax() {
if (window.ActiveXObject) {//ie5,ie6是ActiveObject的方式
xmlHttpReq = new ActiveXObject("Microsft.XMLHTTP");
} else if (window.XMLHttpRequest) {//除ie5,ie6以外的浏览器，XHR是window的子对象
xmlHttpReq = new XMLHttpRequest();
}
//xtr是通过open方法来初始化
//open( method 请求的动作类型 , url 地址 , async 同步还是异步)
xmlHttpReq.open("GET", "index.html", true);
xmlHttpReq.onreadystatechange = RequestCallBack;//设置回调函数
xmlHttpReq.send(null);//因为get方法提交，可以使用null作为参数调用 function RequestCallBack() {//一旦readyState值改变就调用该函数
if (xmlHttpReq.readyState == 4) {
if (xmlHttpReq.status == 200) {
//讲xmlHttpReq.responseText的值赋予id 为resText的元素
document.getElementById('resText').innerHTML = xmlHttpReq.responseText;
}
}
}
}
</script>
</head>
<body>
<input type="button" value="Ajax提交" onclick="Ajax()" />
<div id="resText"></div>
</body>
</html>
9.2 JQuery中的Ajax
9.2.1 load()方法
load(url, [data], [callback])
url:待装入 HTML 网页网址。
data（可选）:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
callback（可选）:载入成功时回调函数。
9.2.2 $.get()
url,[data],[callback],[type]
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default
案例：
以返回数据为json为例
test.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#send").click(function () {
$.get('Ajax_get.ashx',
{
username: $('#username').val(),
content: $('#content').val()
}
//$("#form1").serialize() //序列化表格元素
, function (data, textStatus) {
var username = data.username; //取返回数据的username
console.info(username);
$('#resText').html(username);
}, "json");//格式选择json
});
})
</script>
</head>
<body>
<form id="form1" action="#">
<p>评论</p>
<p>姓名：<input type="text" name="username" id="username" /></p>
<p>内容：<textarea name="content" id="content" rows="2" cols="20">content</textarea></p>
<p>
<input type="button" id="send" value="提交" />
</p>
</form>
<div class="comment">已有评论.</div>
<div id="resText"></div>
</body>
</html>
Ajax_get.ashx
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI.MobileControls;
using System.Web.UI.WebControls;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq; //引用的newtonsoft.json.dll （json.net） namespace EasyUiTest.Ajax_get
{
/// <summary>
/// Ajax_get 的摘要说明
/// </summary>
public class Ajax_get : IHttpHandler
{
HttpRequest Request;
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";
string username = context.Request["username"].ToString();
string content = context.Request["content"].ToString(); //linq to json
JObject json = new JObject();
json.Add(new JProperty("username", username));
json.Add(new JProperty("content", content)); context.Response.Write(json);
} public bool IsReusable
{
get
{
return false;
}
}
}
}
9.2.3 $.post()
它与$.get()使用方法和结构一样，他们之间的区别我就不说了。自己去研究。
9.2.4 $.getScript()方法和$.getJson()方法
$.getScript()加载js文件
$.getScript(‘test.js’)
$.getJson()用来加载json文件
$.getJson(‘test.json’)
9.2.5 序列化元素
1.serialize()
序列表表格内容为字符串。
$("#form1").serialize() //序列化表格里所有元素,取代 { username: $('#username').val(),…}
$.get('Ajax_get.ashx',
//{
// username: $('#username').val(),
// content: $('#content').val()
// }
$("#form1").serialize() //序列化表格里所有元素
, function (data, textStatus) {…}, "json");//格式选择json
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#send").click(function () {
var $data = $(":checkbox,:radio").serialize();
console.info($data);
})
})
</script>
</head>
<body>
<input type="checkbox" name="check" value="1" checked />篮球<br />
<input type="checkbox" name="check" value="2" />足球<br />
<input type="checkbox" name="check" value="3" />乒乓球<br />
<input type="checkbox" name="check" value="4" />羽毛球<br /> <input type="radio" name="radio" value="1" checked />篮球<br />
<input type="radio" name="radio" value="2" />足球<br />
<input type="radio" name="radio" value="3" />乒乓球<br />
<input type="radio" name="radio" value="4" />羽毛球<br /> <button id="send">提交</button>
</body>
</html>
2.serializeArray()
序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入jQuery -->
<script src="../Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function () {
var fields = $("select,:checkbox,:radio").serializeArray();
console.log(fields);
$.each(fields, function (i, field) {
$("#results").append(field.value + " , ");
});
})
</script> <p id="results"><b>结果：</b> </p> <input type="checkbox" name="check" value="1" checked/>篮球<br/>
<input type="checkbox" name="check" value="2" checked/>足球<br/>
<input type="checkbox" name="check" value="3" checked/>乒乓球<br/>
<input type="checkbox" name="check" value="4" />羽毛球<br/> <input type="radio" name="radio" value="1" checked/>篮球<br/>
<input type="radio" name="radio" value="2" />足球<br/>
<input type="radio" name="radio" value="3" />乒乓球<br/>
<input type="radio" name="radio" value="4" />羽毛球<br/>
3.$.param()
将表单元素数组或者对象序列化。是.serialize()的核心方法。
<script type="text/javascript">
//<![CDATA[
$(function(){
var obj={a:1,b:2,c:3};
var k = $.param(obj);
alert(k) // 输出 a=1&b=2&c=3
})
//]]>
</script>
9.2.6 Jquery中的Ajax全局事件
ajaxStart(callback) AJAX 请求开始时执行函数。Ajax 事件。
ajaxStop(callback) AJAX 请求结束时执行函数。Ajax 事件。
$("#loading").ajaxStart(function(){
$(this).show();
});
9.2.7 $.ajax
jQuery.ajax(url,[settings])
url:一个用来包含发送请求的URL字符串。
settings:AJAX 请求设置。所有选项都是可选的。
回调函数
如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。
- beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
- error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
- dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
- success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
- complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。
1.代替$.getScript()方法：
<!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 runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
<!-- 引入jQuery -->
<script src="../Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<script>
$(function () {
$('#send').click(function () {
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});
});
})
</script>
</head>
<body>
<br/>
<p>
<input type="button" id="send" value="加载"/>
</p> <div class="comment">已有评论：</div>
<div id="resText" > </div> </body>
</html>
test.js
var comments = [
{
"username": "张三",
"content": "沙发."
},
{
"username": "李四",
"content": "板凳."
},
{
"username": "王五",
"content": "地板."
}
]; var html = '';
$.each( comments , function(commentIndex, comment) {
html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
}) $('#resText').html(html);
2.代替$.getJSON()方法
<!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 runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
* { margin:0; padding:0;}
body { font-size:12px;}
.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}
.comment h6 { font-weight:700; font-size:14px;}
.para { margin-top:5px; text-indent:2em;background:#DDD;}
</style>
<script src="../Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<!-- 引入jQuery --> <script>
$(function () {
$('#send').click(function () {
$.ajax({
type: "GET",
url: "test.aspx",
dataType: "json",
success: function (data) {
$('#resText').empty();
var html = '';
$.each(data, function (commentIndex, comment) {
html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';
})
$('#resText').html(html);
}
});
});
})
</script>
</head>
<body>
<br/>
<p>
<input type="button" id="send" value="加载"/>
</p> <div class="comment">已有评论：</div>
<div id="resText" > </div> </body>
</html>
test.aspx
[
{
"username": "张三",
"content": "沙发."
},
{
"username": "李四",
"content": "板凳."
},
{
"username": "王五",
"content": "地板."
}
]
效果同上。
jQuery - 9.Ajax的更多相关文章
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- 【原创经验分享】JQuery（Ajax）调用WCF服务
最近在学习这个WCF,由于刚开始学 不久,发现网上的一些WCF教程都比较简单,感觉功能跟WebService没什么特别大的区别,但是看网上的介绍,就说WCF比WebService牛逼多少多少,反正我刚 ...
- jQuery版AJAX简易封装
开发过程中,AJAX的应用应该说非常频繁,当然,jQuery的AJAX函数已经非常好用,但是小编还是稍微整理下,方便不同需求下,可以简化输入参数,下面是实例代码: $(function(){ /** ...
- JS原生ajax与Jquery插件ajax深入学习
序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
- 重写jquery的ajax方法
//首先备份下jquery的ajax方法 var _ajax=$.ajax; //重写jquery的ajax方法 $.ajax=function(opt){ //备份opt中error和success ...
- Jquery通过Ajax方式来提交Form表单
今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是: 保存数据到服务器,成功时显示信息. jQuery 代码: $.ajax({ type: "POST", url: ...
- 对jquery的ajax进行二次封装以及ajax缓存代理组件：AjaxCache
虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或 ...
- jquery管理ajax异步－deferred对象
今天跟大家分享一个jquery中的对象-deferred.其实早在jquery1.5.0版本中就已经引入这个对象了.不过可能在实际开发过程中用到的并不多,所以没有太在意. 这里先不说deferred的 ...
- Struts2 使用jQuery实现Ajax
在jQuery中将Ajax相关的操作进行封装,使用时只需在合适的地方调用Ajax相关的方法即可,相比而言,使用jQuery实现Ajax更加简洁,方便 1.$.Ajax()可以通过发送Http请求加载远 ...
- JQuery中Ajax的操作
JQuery Ajax异步操作的方式: $.ajax,$.post, $.get, $.getJSON. 一, $.ajax,这个是JQuery对ajax封装的最基础步,通过使用这个函数可以完成异 ...
随机推荐
- 贴一下WC总结里提到的那道裸题吧。。。
[bzoj4034][HAOI2015]T2 试题描述 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个 操作,分为三种: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 ...
- 如何使用coding.net
由于我有一位十分聪明能干的室友会使用coding.net,于是我决定奉献一下室友的智慧,告诉大家如何使用conding.net上交作业.(如有说错的地方希望大家可以指出来) 首先登陆codin ...
- word20161203
B-channel / B 信道 B-ISDN, broadband integrated services digital network / 广播综合业务数字网络 backbone router ...
- HackerRank training-the-army
Description 有 \(n\) 个技能,每次可以通过一个巫师,将一个技能转化成另一个技能,问最有最多有多少不同的技能. Sol 网络流. 先说说我一开始非常 naive 的建图,将技能拆点,中 ...
- U盘安装中标麒麟服务器操作系统 一 (NeoKylin 6.5)
U盘安装中标麒麟服务器操作系统(NeoKylin 6.5) 首先需要下载中标麒麟服务器操作系统的iso镜像.我这里的是NeoKylin Linux A 6.5.iso 因为超过了4GB,百度网盘不支持 ...
- sql server2008 获取动态sql的变量值
--通过SQL 字符串 查询 获取查出的值sp_executesql declare @QuerySql nvarchar(500),@uid int,@Ucode varchar(100);set ...
- 《转载》化繁为简 如何向老婆解释MapReduce？
本文转载自http://server.zol.com.cn/329/3295529.html 昨天,我在Xebia印度办公室发表了一个关于MapReduce的演说.演说进行得很顺利,听众们都能够理解M ...
- C#错误之 System.Threading.ThreadAbortException:正在中止线程
参考:http://www.cnblogs.com/chendaoyin/archive/2013/06/27/3159211.html 1.开启一个子线程 //开启一个子线程,子线程调用方法 Met ...
- centos6.5 mysql开机启动
可参考:centos6.5 nginx开机启动 /etc/init.d/下添加mysqld文件,内容如下: #!/bin/sh # Copyright Abandoned TCX DataKonsul ...
- CEF3开发者系列之JS与C++交互之一
JS与Native交互是相对于比较困难的技术,在学习这门技术之前,我们先了解下浏览器内核中的JS引擎与chromium内核的V8引擎相关知识.在浏览器应用中,JS与本地代码互相调用,得益于浏览器内核对 ...