开发者社区> 科技小能手> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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字符都可以有效的解决乱码问题。



本文转自linzheng 51CTO博客,原文链接:http://blog.51cto.com/linzheng/1081833

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery ajax - ajax()方法
jQuery ajax - ajax()方法
49 0
Ajax-15:Jquery中的Ajax
Ajax-15:Jquery中的Ajax
69 0
Jquery发送ajax请求
使用Jquery发送ajax请求
107 0
jQuery ajax - ajax() 方法
jQuery ajax - ajax() 方法 http://www.w3school.com.cn/jquery/ajax_ajax.asp jQuery Ajax 参考手册 实例 通过 AJAX 加载一段文本: jQuery 代码: $(document).
1034 0
jQuery ajax - ajax() 方法
jQuery ajax - ajax() 方法: http://www.w3school.com.cn/jquery/ajax_ajax.asp   data 类型:String 发送到服务器的数据。
687 0
jQuery中Ajax事件
Ajax会触发很多事件。有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配。 $.ajax({     beforeSend: function(){      // Handle the beforeSend event     },     complete: function(){      // Handle the complete event     }     // ... }); 全局事件,可以用bind来绑定,用unbind来取消绑定。
652 0
23703
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载