项目开始了几天了,项目中我用到了自学了的jQuery,但是对jQuery的ajax方法不太熟,因为它是基于Httprequest实现的,也觉得插件AjaxPro能更好的实现ajax异步调用,ajaxPro调用ajax可以直接传datatable、ilist等对象,能够方便的实现功能。
不过昨天下午发现了问题,IE里,当jQuery、AjaxPro同时使用时,出现了BUG,只要注册了AjaxPro的页面,jQuery的事件就会报错,我测试了很多次,问题是出现在AjaxPro的core.ashx文件里,网上找了很多资料没有什么结果,但经过了我的测试我断定这是BUG,他们内部的js起了冲突。
这是core.ashx文件里js错误截图,报出的错误为“无法得到 type 属性。参数无效” 或者 “对象不支持此操作”
但是在Firefox里,运行没问题,但会也有点小问题,按钮触发ajax事件,触发完了,按钮就变成文本框了。
没办法,jQuery里不能用事件,让我觉得很郁闷,今天我项目没怎么做,专门去学学jQuery里的ajax,一般的调用我还懂,比如dataType为xml、html的还能马马虎虎,今天看了点资料,找到了好东西,其实jQuery调用集合有个很好的办法--json,开始我也试过这样的测试,但是由于时间原因一直没通过,呵呵,今天晚上呆公司好好找了找,不错,先记下。。。下面是部分代码:
$("div").load()方式:
$("div").load("login.html"); //加载其他文件内容到div上,适合做模式登录
$.get()方式:
$.get('test.aspx', {index:4}, function (data) {
$("#result").html(data);
});
$.post()方式:
$.post('test.aspx', {index:4}, function (data){
$("#result").html(data);
});
$.post()方式:(获取json)
ajax.ashx.cs文件:
Response.ContentType = "application/json";
Response.Write("{name:'lidi',age:20}");
调用
$.post("ajax.ashx",{},function(data){
alert(data.name);
},"post"); //注意这里
$.ajax()方式:(dataType:xml)
$.ajax({
type:"get",
dataType:"xml",
url:"http://www.cnblogs.com/rss", //返回xml格式信息
beforeSend:function(xmlhttprequest){
$("img").show();
},
success:function(data,status){
$("div").html("");
$("item",data).each(function(i, domEle){
$("div").append("<li>"+$(domEle).children("title").text()+"</li>");
});
},
complete:function(){
$("img").hide();
},
error:function(xmlhttprequest,error){
alert(error);
}
});
$.ajax()方式:(dataType:html)
$.ajax({
type:"post",
url:"test.aspx", //返回xml格式字符串,如:<ul><li>aa</li><li>bb</li></ul>
data:"index=3&name="+$("#name").val()+"&age="+$("#age").val()+"&sex="+$("input:radio:checked").val(),
dataType:"html",
timeout:50000,
beforeSend:function(xmlhttprequest){
$("div").html("<img id='imgid' src='http://www.cnblogs.com/imges/loading.gif' />");
},
success:function(xml,status){
$(xml).each(function(){
$(this).children().each(function(){
$("<li></li>").html($(this).text()).appendTo("div");
});
});
},
error:function(xmlhttprequest,error){
alert(error);
},
complete:function(){
$("#imgid").hide();
}
});
$.ajax()方式:(dataType:script)
$.ajax({
type: "post",
url: "ajax.aspx", //返回格式如:"var a = {name:'lidi',age:20};"
data: "index=5",
dataType: "script",
success:function(){
alert(a.name);
}
});
$.ajax()方式:(dataType:json)
$.ajax({
type: "post",
url: "ajax.aspx", //返回格式如:"{name:'lidi',age:20}"
data: "index=5",
dataType: "json",
success:function(data){
alert(data.name);
}
});