(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事件.
})