Ajax


原文链接: Ajax

Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了。

推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.htmlhttp://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指定,不指定智能判断。
2.$.ajax只提交form以文本方式,如果异步提交包含上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit

四、$.ajax我的实际应用例子


    //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); 
					})
				}
}); 

AJAX - 廖雪峰的官方网站

`