jQuery-Ajax
一、jQuery-Ajax参数说明
$.ajax(prop) 通过一个ajax请求，回去远程数据，prop是一个hash表，它可以传递的key/value有以下几种
(String)type：数据传递方式(get或post)
(String)url：数据请求页面的url
(String)data：传递数据的参数字符串，只适合post方式
(String)dataType：期待数据返回的数据格式(例如 "xml", "html", "script",或 "json")
(Boolean)ifModified： 当最后一次请求的相应有变化是才成功返回，默认值是false
(Number)timeout:设置时间延迟请求的时间
(Boolean)global：是否为当前请求触发ajax全局事件，默认为true
(Function)error：当请求失败时触发的函数
(Function)success：当请求成功时触发函数
(Function)complete：当请求完成后出发函数
二、jQuery中实现Ajax的3种方法（post，get，ajax）
//------------------post--------------------------------------------------------------------
$('#input1').click(function(){
$.post(
'ajax.ashx',
{username:$("#username").val()},
function(data){
var myjson='';
eval("myjson="+data+";");
$("#content_post").html('post区'+myjson.username);
}
);
);
//-------------------get--------------------------------------------------------------------
$('#input2').click(function(){
$.get('ajax.ashx',{username:$("#username").val()},
function(data){
var myjson='';
eval("myjson="+data+";");
$("#content_get").html("get区"+myjson.username);
});
});
//-------------------ajax-------------------------------------------------------------------
$('#input3').click(function(){
var params=$('#username').serialize();
$.ajax({
url :'ajax.ashx',
type:'get',
dataType:'json',
data:params,
error:update_page,
success:update_page
});
});
});
function update_page (json) {
var str="ajax区:"+json.username+"<br />";
$("#content_ajax").html(str);
}
</HEAD>
<BODY>
<div id="content_post" style="background:orange;border:1px solid red;width:410px;height:50px;">post区:</div>
<div id="content_get" style="background:orange;border:1px solid red;width:410px;height:50px;">get区:</div>
<div id="content_ajax" style="background:orange;border:1px solid red;width:410px;height:50px;">ajax区:</div>
<form>
<input type="text" id="username" name='username'/>
<input type="button" id='input1' value="post提交"/>
<input type="button" id='input2' value="get提交"/>
<input type="button" id='input3' value="ajax提交"/>
</form>
</BODY>
</HTML>
三、相同url缓存问题的解决
对于get请求：
url = "someurl.php?id=123";
url += "&anticache=" + Math.floor(Math.random()*1000);
$.get(url);
对于post请求：
parms = {
id : "123",
anticache : Math.floor(Math.random()*1000)
};
$.post("someurl.php", parms);
四、JQuery.ajax传递中文参数乱码的解决方法
解决方案：
|
1
|
var
data = {
|
|
1
|
UserName: escape(your user name here),
|
|
1
|
Password: escape(your password here),};
|
|
1
|
var
jsonStr = JSON.stringify(data);
//
|
|
1
|
the json2 method.$.ajax({
|
|
1
|
url:
'../Service.asmx/Login'
,
|
|
1
|
data:
'userinfo='
+ jsonStr,
|
|
1
|
contentType:
"application/json; charset=utf-8"
,
|
|
1
|
dataType:
"jsonp"
,
|
|
1
|
type:
"GET"
,
|
|
1
|
success:
function
(response) { … },
|
|
1
|
error:
function
(a, b, c) { … }}
|
|
1
|
|
这个方案就是使用javascript的escape方法来对中文字符进行编码，然后到WebService那里会自动解码成为中文。
第二个问题：用JQuery Ajax GET传送瑞典字符等Unicode字符出现乱码，即便是用了escape也无济于事。
通过GET方法发送的请求实际上还是通过URI来传送参数的，那么GET方式传送的字符就与文件设定的编码格式无关了，完全是由URI来决定传送的是什么，那么如果对URI进行编码呢？
事实上，javascript已经有这样的全局函数来实现对URI的编码了:encodeURI(uri),让JQuery Ajax发送一个由URI编码好的数据就不会出现乱码了，而且在WebService端还能自动对数据进行decode.
改善后的代码如下：
|
1
|
var
data = {
|
|
1
|
UserName: encodeURI(your user name here),
|
|
1
|
Password: encodeURI(your password here),};
|
|
1
|
var
jsonStr = JSON.stringify(data);
//
|
|
1
|
the json2 method.
|
|
1
|
$.ajax({
|
|
1
|
url:
'../Service.asmx/Login'
,
|
|
1
|
data:
'userinfo='
+ jsonStr,
|
|
1
|
contentType:
"application/json; charset=utf-8"
,
|
|
1
|
dataType:
"jsonp"
,
|
|
1
|
type:
"GET"
,
|
|
1
|
success:
function
(response) { … },
|
|
1
|
error:
function
(a, b, c) { … }}
|
|
1
|
|
这个改进后的方案不仅仅对中文字符有效，而且对其他的Unicode字符都可以有效的解决乱码问题。