Ajax
Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了。
推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html 和 http://www.w3school.com.cn/jquery/
ajax请求json并解析
$(document).ready(function(){
$.ajax({
type: "GET",
url: "data.json",
dataType: "json",
success: jsonParser
});
});
function jsonParser(json) {
$("#load").fadeout();
$.getJSON("data.json", function(data){
$.each(data.paintings.painting, function(k,v){
var title = v.title;
var img = v.image;
var price = v.price;
$("#container").append("<div class='painting'><img src='images/" + img +"' width='200' height='225' alt='" + title + "'></div>")
});
});
}
ajax
jQuery在全局对象jQuery(也就是$)绑定了ajax()函数,可以处理AJAX请求。ajax(url, settings)函数需要接收一个URL和一个可选的settings对象,常用的选项如下:
async:是否异步执行AJAX请求,默认为true,千万不要指定为false;
type:发送的Method,缺省为'GET',可指定为'POST'、'PUT'等;
contentType:发送POST请求的格式,默认值为 'application/x-www-form-urlencoded; charset=UTF-8' ,也可以指定为text/plain、application/json;
data:发送的数据,可以是字符串、数组或object。如果是GET请求,data将被转换成query附加到URL上,如果是POST请求,根据contentType 把data序列化成合适的格式;
headers:发送的额外的HTTP头,必须是一个object;
dataType:接收的数据格式,可以指定为'html'、'xml'、'json'、'text'等,缺省情况下根据响应的Content-Type猜测。
下面的例子发送一个GET请求,并返回一个JSON格式的数据:
var jqxhr = $.ajax('/api/categories', {
dataType: 'json'
});
// 请求已经发送了
ajax方法data参数用法的总结
$.ajax({
type: "POST",
url: "/some.php",
data: "name=John&location=Boston", //第一种方式传参
// data: {name:"John",location:"Boston"} //第二种方式传参
// data: {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'
/*
第一种我们用url传参,参数里面如果加带"&"这个符号的话,可能参数接收不到或不完整,
如“ data: "name=John&location=Boston",” 如果name的值是"john&smith"这样写可能就会有问题,
我们可以用JS里面的encodeURIComponent()方法进行转义,
但如果用data: {name:"John",location:"Boston"}这种方式写的话就不需要进行转义,
如果转义的话,接收的将是转义后的字符串
*/
success: function(msg){
alert( "Data Saved: " + msg );
}
});
$.get
对常用的AJAX操作,jQuery提供了一些辅助方法。由于GET请求最常见,所以jQuery提供了get()方法,可以这么写:
var jqxhr = $.get('/path/to/resource', {
name: 'Bob Lee',
check: 1
});
第二个参数如果是object,jQuery自动把它变成query string然后加到URL后面,实际的URL是:
/path/to/resource?name=Bob%20Lee&check=1
这样我们就不用关心如何用URL编码并构造一个query string了。
$.post
post()和get()类似,但是传入的第二个参数默认被序列化为application/x-www-form-urlencoded:
var jqxhr = $.post('/path/to/resource', {
name: 'Bob Lee',
check: 1
});
实际构造的数据name=Bob%20Lee&check=1作为POST的body被发送。
$.getJSON
由于JSON用得越来越普遍,所以jQuery也提供了getJSON()方法来快速通过GET获取一个JSON对象:
var jqxhr = $.getJSON('/path/to/resource', {
name: 'Bob Lee',
check: 1
}).done(function (data) {
// data已经被解析为JSON对象了
});
$.post、$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()
二、$.ajax的参数描述
参数 描述
url 必需。规定把请求发送到哪个 URL。
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
dataType 可选。规定预期的服务器响应的数据类型。
默认执行智能判断(xml、json、script 或 html)。
三、$.ajax需要注意的一些地方:
1.data主要方式有三种,html拼接的,json数组,form表单经serialize()序列化的;通过dataType指定,不指定智能判断。 四、$.ajax我的实际应用例子
2.$.ajax只提交form以文本方式,如果异步提交包含
//1.$.ajax带json数据的异步请求
var aj = $.ajax( {
type:'post',
url:'productManager_reverseUpdate',// 跳转到 action
data:{
selRollBack : selRollBack,
selOperatorsCode : selOperatorsCode,
PROVINCECODE : PROVINCECODE,
pass2 : pass2
},
cache:false,
dataType:'json',
success:function(data) {
if(data.msg =="true" ){
// view("修改成功!");
alert("修改成功!");
window.location.reload();
}else{
view(data.msg);
}
},
error : function() {
// view("异常!");
alert("异常!");
}
});
//2.$.ajax序列化表格内容为字符串的异步请求
function noTips(){
var formParam = $("#form1").serialize();//序列化表格内容为字符串
$.ajax({
type:'post',
url:'Notice_noTipsNotice',
data:formParam,
cache:false,
dataType:'json',
success:function(data){
}
});
}
//3.$.ajax拼接url的异步请求
var yz=$.ajax({
type:'post',
url:'validatePwd2_checkPwd2?password2='+password2,
data:{},
cache:false,
dataType:'json',
success:function(data){
if( data.msg =="false" ) //服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间
{
textPassword2.html("<font color='red'>业务密码不正确!</font>");
$("#validatePassword2").val("pwd2Error");
checkPassword2 = false;
return;
}
},
error:function(){}
});
//4.$.ajax拼接data的异步请求
$.ajax({
url:'<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action',
type:'post',
data:'merName='+values,
async : false, //默认为true 异步
error:function(){
alert('error');
},
success:function(data){
$("#"+divs).html(data);
}
});
<!doctype html>
<html>
<head>
<script src="jquery-1.7.1.min.js"></script>
</head>
<body>
<div id="output"><button onclick="loadjson()">LOAD</button></div>
<script>
$(function(){
$.ajax({
type: "POST",
url: "http://v2.punctualizer.com/users/login",
cache: false,
data: { "user[username]": "youruser", "user[password]": "youpass"},
success: function(msg){
alert(msg);
},
xhrFields: { withCredentials: true }
});
});
function loadjson(){
$.ajax({
type: "GET",
url: "http://v2.punctualizer.com/reports.json",
cache: false,
success: function(data){
alert(data);
},
xhrFields: { withCredentials: true }
});
}
</script>
</body>
</html>
$( document ).ready(function() {
//this is for single json object
$.ajax({
type: "GET",
url: "http://dev.lifeadv.ladbrokes.com/v1/points/test3003b?2411",
dataType: "json",
success: function(data){
$.each(data, function(key, value) {
$("#coins").append(value.points);
})
}
});