jQuery学习之jQuery Ajax用法详解
[导读] jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍。我们先从最简单的方法看起,处理复杂的ajax请求时,使用jQuery
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍。我们先从最简单的方法看起,处理复杂的ajax请求时,jQuery使用jQuery.ajax()方法进行处理。在jQuery中有一些简单的方法,它对jQuery.ajax()方法进行了封装,使得我们在处理一些简单的Ajax事件时,不需要使用jQuery.ajax()方法,其中有些方法在之前的文章中已经出现过了,相信大家很快便能掌握。当然,本篇后半部分会对jQuery.ajax()方法做非常具体的说明,因为它是本篇的重中之重。
以下5个方法执行一般Ajax请求的简短形式,在处理复杂的Ajax请求时应该使用jQuery.ajax().
1.load(url,[data],[callback])
载入远程HTML文件代码并插入至DOM中,默认使用GET方式,传递参数时自动转换为POST方式。
◦url:要载入的远程url地址
◦data:发送至服务器的key/value 数据
◦callback:载入成功时的回调函数
示例代码如下:
$.ajax({ url: "http://www.hzhuti.com", //请求的url地址 dataType: "json", //返回格式为json async: true, //请求是否异步,默认为异步,这也是ajax重要特性 data: { "id": "value" }, //参数值 type: "GET", //请求方式 beforeSend: function() { //请求前的处理 }, success: function(req) { //请求成功时处理 }, complete: function() { //请求完成的处理 }, error: function() { //请求出错处理 } });View Code
使用jQuery.ajax()
这里将显示数据
$.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);
}
});
- jQuery实现商品楼层的感觉
- JQuery attr() 和prop()方法 设置属性
- 【前端性能】必须要掌握的原生JS实现JQuery
- js/jquery去掉空格,回车,换行示例代码
- JQuery Form AjaxSubmit
- Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
- (function($){...})(jQuery)是什么意思
- jQuery插件之【jqGrid】常用语法整理-【更新】
- jquery,javascript,easyUI,取值
- 解决jQuery UI 对话框兼容性问题
- jQuery 工具类函数
- jquery autocomplete插件 实现输入框自动补全
- JQuery.Ajax()的data参数类型
- 使用jquery的autocomplete实现类似百度的输入提示
- javascript和jquery分别实现用户登录验证
- 几项有用的JQUERY代码
- jQuery中的ajax服务端返回方式详细说明
- jquery的ajax异步请求接收返回json数据
- js及jQuery实现checkbox的全选、反选和全不选
- jQuery 参考手册 - Ajax