标签:
(1)实现的几种方式:
| $(selector).load(url,data,callback) | 把远程数据加载到被选的元素中 | 
| $.ajax(options) | 把远程数据加载到 XMLHttpRequest 对象中 | 
| $.get(url,data,callback,type) | 使用 HTTP GET 来加载远程数据 | 
| $.post(url,data,callback,type) | 使用 HTTP POST 来加载远程数据 | 
| $.getJSON(url,data,callback) | 使用 HTTP GET 来加载远程 JSON 数据 | 
| $.getScript(url,callback) | 加载并执行远程的 JavaScript 文件 | 
$.ajax需要注意的一些地方:
  1.data主要方式有三种,html拼接的,json数组,form表单经serialize()序列化的;通过dataType指定,不指定智能判断。
  2.$.ajax只提交form以文本方式,如果异步提交包含<file>上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit。
  3.返回其创建的 XMLHttpRequest 对象 
 
 $.post简化了数据提交方式,只能采用POST方式提交。只能是异步访问服务器,不能同步访问,不能进行错误处理。
	url:发送请求地址。  
	data:待发送 Key/value 参数。 
	callback:发送成功时回调函数。 
	type:返回内容格式,默认执行智能判断(xml、json、script 或 html)。
 
 $.getJSON,这个是进一步的封装,也就是对返回数据类型为Json进行操作。里边就三个参数,需要我们设置,非常简单:url,[data],[callback] 
 
 (2)使用举例:
 var configObj = {
       method   //数据的提交方式:get和post
       url   //数据的提交路劲
       async   //是否支持异步刷新,默认是true
       data    //需要提交的数据
       dataType   //服务器返回数据的类型,默认执行智能判断(xml、json、script 或 html)
       success    //请求成功后的回调函数
       error   //请求失败后的回调函数
    }
 
$.ajax(configObj);//通过$.ajax函数进行调用,其它方法类似。
 
 
//1.$.ajax带json数据的异步请求  
var aj = $.ajax( {    
    url:‘productManager_reverseUpdate‘,// 跳转到 action    
    data:{    
             selRollBack : selRollBack,    
             selOperatorsCode : selOperatorsCode,    
             PROVINCECODE : PROVINCECODE,    
             pass2 : pass2    
    },    
    type:‘post‘,    
    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);     
    }  
}); 
 
 
(3)大数据处理:
 模仿表单Form来支持Struts2的域驱动模式,进行自动数据的封装。用法和$.ajax类似
$(function(){  
        var options = {  
            beforeSubmit : function() {//处理以前需要做的功能  
                $("tipMsg").text("数据正在保存,请稍候...");  
                $("#insertBtn").attr("disabled", true);  
            },  
            success : function(result) {//返回成功以后需要的回调函数  
                if ( result.success ) {  
                    $("#tipMsg").text("机构保存成功");  
 
                    // 控制树形组件,增加新的节点  
                    var tree = window.parent.treeFrame.tree;  
                    tree.insertNewChild("${org.id}", result.id, result.name);  
                } else {  
                    $("#tipMsg").text("机构保存失败");  
                }  
                // 启用保存按钮  
                $("#insertBtn").attr("disabled", false);  
            },  
            clearForm : true  
        };  
      
        $(‘#orgForm‘).ajaxForm(options); //通过Jquery.Form中的ajaxForm方法进行提交  
    });
 
 (4)ajax事件:
事件类型有一个规律, 凡是带了ajax开头的都是global的,否则就是local的。 
jquery中各个事件执行顺序如下:
1.ajaxStart(全局事件)
2.beforeSend
3.ajaxSend(全局事件)
4.success
5.ajaxSuccess(全局事件)
6.error
7.ajaxError (全局事件)
8.complete
9.ajaxComplete(全局事件)
10.ajaxStop(全局事件)
 
ajaxsend
	ajaxSend是global的,因此既可以在ajax内部使用,也能绑定在dom元素之上。同理其它
ajaxstart
ajaxstop
ajaxcomplete
ajaxsuccess
ajaxerror
ajaxsetup
设置全局 AJAX 默认选项。  
设置 AJAX 请求默认地址为 "/xmlhttp/",
禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。
其后的 AJAX 请求不再设置任何选项参数。
 jQuery 代码: 
$.ajaxSetup({ url: "/xmlhttp/", global: false, type: "POST" }); 
$.ajax({ data: myData });
serialize
serializearray
serialize() : 序列表表格内容为字符串。
serializeArray() : 序列化表格元素 (类似 ‘.serialize()‘ 方法) 返回 JSON 数据结构数据。
 
 
Ajax事件:局部事件 和 全局事件。
局部事件就是在每次的Ajax请求时在方法内定义的,例如:
$.ajax({
beforeSend: function(){},
complete: function(){}
});
全局事件是每次的Ajax请求都会触发的,它会向DOM中的所有元素广播,在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件可以如下定义:
$("#loading").bind("ajaxSend", function(){
	$(this).show();
}).bind("ajaxComplete", function(){
	$(this).hide();
});
或者:
$("#loading").ajaxStart(function(){
	$(this).show();
}); 
我们可以在特定的请求将全局事件禁用,只要设置下 global 选项就可以了:
$.ajax({
url: "test.html",
global: false,// 禁用全局Ajax事件.
})
 
jquery ajax
标签:
原文地址:http://www.cnblogs.com/h1359705211/p/4373078.html