Jquery .ajax方法分析详解编程语言
有很多选项,介绍其中的几个:
·dataType:想从服务器得到哪种类型的数据。xml,html,script,json,jsonp,text
·success:请求成功后的处理函数
·type:以POST或GET的方式请求。默认GET。PUT和DELETE也可以用,但并不是所有的浏览器都支持
·url:请求的目的地址,须是一个字符串。
·complete:不管请求成功还是错误,只要请求完成,可以执行的事件。
·beforeSend:传递异步请求之前的事件。
这次说解,使用firedebug来配合说解。
(一)请求ashx文件,并添加ajax事件,添加缓冲提示
描述:请求数据,请求超时时间设置为5秒,如果超时,那么输出超时提示,且在这5秒中的等待过程中,提供等图标,5秒之后,提示请求超时。
(1)ashx文件
Customer customer = new Customer
{ Unid = 1, CustomerName = 宋江 , Memo = 天魁星 , Other = 黑三郎 };
string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(customer);
System.Threading.Thread.Sleep(1000*7);
context.Response.Write(strJson);
为了让客户端请求超时,服务设置延时7秒。
(2)ajax post请求
function ajax_ashx() {
$.ajax({
url: webdata/ajax_1.ashx ,
type: post ,
success: function(data) {
var jsonObject = $.jsonToObject(data);
var tt = ;
$.each(jsonObject, function(k, v) {
tt += k + : + v + br/ ;
});
$( #divmessage ).html(tt);
},
cache: false,
timeout: 5000,
error: function() {
alert( 超时 );
}
});}
设置超时时间5000ms,超时错误出示超时错误。
(3)设置客户端请求等待图标
· img src= images/loader.gif id= ajaximg / 找个小图标
·为这个图标设置ajax事件
$( #ajaximg ).bind( ajaxSend , function() { Show(); });
$( #ajaximg ).bind( ajaxComplete , function() { Hide(); });
function Hide() {
$( #ajaximg ).hide();
}
function Show() {
$( #ajaximg ).show();
}
在客户端5秒请求的时间限制下,请求超时,提示超时错误。
·在ashx端contentType的设置对返回的数据没有影响
·客户端dataType也没有影响,可以省略。
·在firebug里可以看到返回的数据为:
Customer customer = new Customer
{ Unid = 1, CustomerName = 宋江 , Memo = 天魁星 , Other = 黑三郎 };
Customer customer2 = new Customer
{ Unid = 2, CustomerName = 吴用 , Memo = 天机星 , Other = 智多星 };
List Customer _list = new List Customer
_list.Add(customer);
_list.Add(customer2);
string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(customer);
System.Threading.Thread.Sleep(1000 * 3);
context.Response.Write(strJson);
·ajax post
function ajax_ashxList() {
$.ajax({
url: webdata/ajax_1.ashx ,
type: post ,
dataType: json ,
success: function(data) {
var tt = ;
$.each(data, function(k, v) {
$.each(v, function(kk, vv) {
tt += kk + : + vv + br/ ;
});
});
$( #divmessage ).html(tt);
},
cache: false,
timeout: 5000,
error: function() {
alert( 超时 );
}
});
}
·dataType要是json
·在firebug里
[
{"Unid":1,"CustomerName":"宋江","Memo":"天魁星","Other":"黑三郎"},
{"Unid":2,"CustomerName":"吴用","Memo":"天机星","Other":"智多星"}
]
虽然是字串,但这里直接用就行,不用转换为json对象。这一点我现在还不明白怎么回事。
(三)请求ws
这次请求返回字串类型的web方法。
(1)Hello
[WebMethod]
public string HelloWorld()
{
return Hello World ;
}
function ajax_webserviceHello() {
$.ajax({
type: post ,
contentType: application/json ,
url: ajax_1.asmx/HelloWorld ,
data: {} ,
dataType: json ,
success: function(data) {
alert(data.d);
}
});
}
·contentType,data都不能为空,即使data为空,也要带空参数
{ d : Hello World }
发现服务端请求到的数据是这样的。所以,访问时,要以data.d来访问。(在.net3.5中)。但也可以如下访问:
$.each(data, function(k, v) {
alert(v);
});
(2)Customer
这次得到一个客户实体
[WebMethod]
public string GetCustomer()
{
Customer customer = new Customer { Unid = 1, CustomerName = 宋江 , Memo = 天魁星 , Other = 黑三郎 };
string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(customer);
return strJson;
}
function ajax_webserviceCustomer() {
$.ajax({
type: post ,
contentType: application/json ,
url: ajax_1.asmx/GetCustomer ,
data: {} ,
dataType: json ,
success: function(data) {
var tt = ;
var jsonObject = $.jsonToObject(data.d);
$.each(jsonObject, function(k, v) {
tt += k + : + v + br/ ;
});
$( #divmessage ).html(tt);
}
});
}
发现返回的也是以d为key的一个object。
{"d":"{/"Unid/":1,/"CustomerName/":/"宋江/",/"Memo/":/"天魁星/",/"Other/":/"黑三郎/"}"}
这点应该注意。
(3)customer list
[WebMethod]
public string GetCustomerList()
{
Customer customer = new Customer
{ Unid = 1, CustomerName = 宋江 , Memo = 天魁星 , Other = 黑三郎 };
Customer customer2 = new Customer
{ Unid = 2, CustomerName = 吴用 , Memo = 天机星 , Other = 智多星 };
List Customer _list = new List Customer
_list.Add(customer);
_list.Add(customer2);
string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(_list);
return strJson;
}
function ajax_webserviceCustomerList() {
$.ajax({
type: post ,
contentType: application/json ,
url: ajax_1.asmx/GetCustomerList ,
data: {} ,
dataType: json ,
success: function(data) {
var tt = ;
var jsonObject = $.jsonToObject(data.d);
$.each(jsonObject, function(k, v) {
$.each(v, function(kk, vv) {
tt += kk + : + vv + br/ ;
});
});
$( #divmessage ).html(tt);
}
});
}
{
"d":
"[{/"Unid/":1,/"CustomerName/":/"宋江/",/"Memo/":/"天魁星/",/"Other/":/"黑三郎/"},
{/"Unid/":2,/"CustomerName/":/"吴用/",/"Memo/":/"天机星/",/"Other/":/"智多星/"}]"
}
这也是一个以d为key的对象。
(4)with para
[WebMethod]
public string GetCustomerListWithPara(int iUnid)
{
Customer customer = new Customer
{ Unid = 1, CustomerName = 宋江 , Memo = 天魁星 , Other = 黑三郎 };
Customer customer2 = new Customer
{ Unid = 2, CustomerName = 吴用 , Memo = 天机星 , Other = 智多星 };
List Customer _list = new List Customer
_list.Add(customer);
_list.Add(customer2);
var cus = from q in _list
where q.Unid == iUnid
select q;
string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(cus);
return strJson;
}
function ajax_webserviceCustomerListWithPara() {
$.ajax({
type: post ,
contentType: application/json ,
url: ajax_1.asmx/GetCustomerListWithPara ,
data: {iUnid: +1+ } ,
dataType: json ,
success: function(data) {
var tt = ;
var jsonObject = $.jsonToObject(data.d);
$.each(jsonObject, function(k, v) {
$.each(v, function(kk, vv) {
tt += kk + : + vv + br/ ;
});
});
$( #divmessage ).html(tt);
}
});
}
{
"d":
"[{/"Unid/":1,/"CustomerName/":/"宋江/",/"Memo/":/"天魁星/",/"Other/":/"黑三郎/"}]"
}
这也是一个以d为key的对象。
综上所述,在对web服务进行请求时:
·在.net3.5中,访问web服务时,返回的元素是一个以d为key的k/v对。如果要进行下一步解析,要认识d属性。(这是在当web方法返回json字串时成立)
·在.net3.5中,访问web服务,要对web服务添加修饰:[System.Web.Script.Services.ScriptService] 否则,当.ajax()请求服务时,会有异常:
只能从脚本中调用在类定义上有[ScriptService]属性的 Web 服务
13600.html
cjavaxml相关文章
- jQuery hover() 方法
- 开心档之jQuery - AJAX get() 和 post() 方法
- javascript/jquery获取地址栏url参数的方法
- jQuery ajax方法
- jQuery Ajax 实例 ($.ajax、$.post、$.get)详解编程语言
- jquery$.ajax()取xml数据的小问题解决方法
- jquery获取table中的某行全部td的内容方法
- jQuery动画animate方法使用介绍
- jquery自定义类似$.ajax()的方法实现代码
- jquery设置控件位置的方法
- JQuery中$.ajax()方法参数详解及应用
- jQuery中bind,live,delegate与one方法的用法及区别解析
- JQuery中使用Ajax赋值给全局变量异常的解决方法
- 基于jquery的simpleValidate简易验证插件
- jquery中get,post和ajax方法的使用小结
- jquery.ajax的url中传递中文乱码问题的解决方法
- jquery.Ajax()方法调用Asp.Net后台的方法解析
- jquery获取当前点击对象的value方法
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- 用jquery的方法制作一个简单的导航栏
- 超级简单的jquery操作表格方法
- jQuery中Ajax的load方法详解