jQuery.ajax( options )
来源:互联网 发布:莱昂纳德体测数据虎扑 编辑:程序博客网 时间:2024/05/20 18:01
jQuery.ajax( options )
有很多选项,介绍其中的几个:
·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 ="黑三郎" };
stringstrJson = 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){
varjsonObject = $.jsonToObject(data);
vartt = '';
$.each(jsonObject, function(k, v) {
tt += k + ":" + v +"<br/>";
});
$("#divmessage").html(tt);
},
cache: false,
timeout: 5000,
error: function(){
alert("超时");
}
});}
设置超时时间5000ms,超时错误出示超时错误。
(3)设置客户端请求等待图标
·<imgsrc="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里可以看到返回的数据为:
{"Unid":1,"CustomerName":"宋江","Memo":"天魁星","Other":"黑三郎"}
所以可以按以前我说过的方法进行解析。
(二)正常请求,并解析
·ashx
Customer customer = new Customer
{ Unid = 1, CustomerName = "宋江", Memo ="天魁星", Other ="黑三郎" };
Customercustomer2 = new Customer
{ Unid = 2, CustomerName = "吴用", Memo ="天机星", Other ="智多星" };
List<Customer> _list =newList<Customer>();
_list.Add(customer);
_list.Add(customer2);
stringstrJson = 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){
vartt = '';
$.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 stringHelloWorld()
{
return "HelloWorld";
}
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 stringGetCustomer()
{
Customercustomer = new Customer{ Unid = 1, CustomerName = "宋江", Memo ="天魁星", Other ="黑三郎" };
stringstrJson = Newtonsoft.Json.JsonConvert.SerializeObject(customer);
returnstrJson;
}
function ajax_webserviceCustomer() {
$.ajax({
type: "post",
contentType: "application/json",
url: "ajax_1.asmx/GetCustomer",
data: "{}",
dataType: 'json',
success: function(data){
vartt = '';
varjsonObject = $.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)customerlist
[WebMethod]
public stringGetCustomerList()
{
Customercustomer = new Customer
{ Unid = 1, CustomerName = "宋江", Memo ="天魁星", Other ="黑三郎" };
Customercustomer2 = new Customer
{ Unid = 2, CustomerName = "吴用", Memo ="天机星", Other ="智多星" };
List<Customer> _list =newList<Customer>();
_list.Add(customer);
_list.Add(customer2);
stringstrJson = Newtonsoft.Json.JsonConvert.SerializeObject(_list);
returnstrJson;
}
function ajax_webserviceCustomerList() {
$.ajax({
type: "post",
contentType: "application/json",
url: "ajax_1.asmx/GetCustomerList",
data: "{}",
dataType: 'json',
success: function(data){
vartt = '';
varjsonObject = $.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 stringGetCustomerListWithPara(int iUnid)
{
Customercustomer = new Customer
{ Unid = 1, CustomerName = "宋江", Memo ="天魁星", Other ="黑三郎" };
Customercustomer2 = new Customer
{ Unid = 2,CustomerName = "吴用", Memo ="天机星", Other ="智多星" };
List<Customer> _list =newList<Customer>();
_list.Add(customer);
_list.Add(customer2);
var cus= from q in_list
whereq.Unid == iUnid
selectq;
stringstrJson = Newtonsoft.Json.JsonConvert.SerializeObject(cus);
returnstrJson;
}
functionajax_webserviceCustomerListWithPara() {
$.ajax({
type: "post",
contentType: "application/json",
url: "ajax_1.asmx/GetCustomerListWithPara",
data: "{iUnid:"+1+"}",
dataType: 'json',
success: function(data){
vartt = '';
varjsonObject = $.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 服务
- jQuery.ajax(options)
- jQuery.ajax( options )
- jQuery的Ajax介绍-jQuery.ajax(options)
- jQuery.ajax(options)的参数
- jQuery.ajax(options)的参数
- Jquery的$.ajax( options )方法
- jQuery Ajax事件-jQuery.ajaxSetup(options)
- ajax options
- ajax options
- jQuery.ajax( options ) : 默认是get方式发送的
- learning jQuery 学习笔记十四(+jQuery 1.4.1 API)-- AJAX ----$.ajax([options])
- jQuery Ajax 全解析get/load/serialize()/Query.ajax( options )jQuery.getScript(()
- Jquery autocomplete options
- Ext.Ajax.request options 学习
- nodejs——关于jquery的put、delete ajax请求在后端无法解析请求变成options的解决办法
- jquery.autocomplete.js--options参数介绍
- jquery中position定位options参数
- jquery获取select 选中的options
- 字节流字符流的使用
- Xcode添加静态库以及编译选项配置常见问题
- java.security.AccessControlException: access denied
- Python程序的执行原理(-)
- php多进程单例模式下的 MySQL及Redis连接错误修复
- jQuery.ajax( options )
- Oracle User和Schema的区别
- 整数中1出现的次数(从1到n整数中1出现的次数)
- Gradle——故障排除
- Effective modern C++ 条款 40:注意不同线程句柄的析构函数的行为
- Spring @Resource、@Autowired、@Qualifier的注解注入及区别
- LaTeX 文件扩展名笔记
- 项目-汉语字典总结
- AsyncTask源码解析