$.ajax 使用详解
Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作。
$.post、$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()
一、$.ajax的一般格式
$.ajax({
type: 'POST',
url: url ,
data: data ,
success: success ,
dataType: dataType
});
二、$.ajax的参数描述
参数 描述
| url | 必需。规定把请求发送到哪个 URL。 |
| data | 可选。映射或字符串值。规定连同请求发送到服务器的数据。 |
| success(data, textStatus, jqXHR) | 可选。请求成功时执行的回调函数。 |
| dataType |
可选。规定预期的服务器响应的数据类型。 默认执行智能判断(xml、json、script 或 html)。 |
三、$.ajax需要注意的一些地方:
1.data主要方式有三种,html拼接的,json数组,form表单经serialize()序列化的;通过dataType指定,不指定智能判断。
2.$.ajax只提交form以文本方式,如果异步提交包含<file>上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit
四、实例:
//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);
}
});
//5.done的使用
$.ajax({
type:'get',
async:false,
url:this.topUrl + 'sbjctDmnInfo/queryVrsnCD.action?rnd=' + Math.random()
}).done(function(data){
if (data.retcode == '0000') {
aplnCommon.rightTreeSearchObj.dataVrsnId = data.obj[0].vrsnId;
func1();
}
});
随机推荐
- 关于IOS项目QQ空间授权提示安装最新版本的QQ的解决方法!
- SLF4J 简单日志门面 介绍和使用
参考:http://singleant.iteye.com/blog/934593 http://liuzidong.iteye.com/blog/776072 介绍: 简单日记门面(s ...
- Linux 如何实现 VLAN
LAN 表示 Local Area Network,本地局域网,通常使用 Hub 和 Switch 来连接 LAN 中的计算机.一般来说,两台计算机连入同一个 Hub 或者 Switch 时,它们就在 ...
- msp430项目编程46
msp430综合项目---监控系统46 1.电路工作原理 2.代码(显示部分) 3.代码(功能实现) 4.项目总结
- Linux下AT&T汇编语法格式与Intel汇编语法格式异同
由于绝大多数的国内程序员以前只接触过Intel格式的汇编语言,很少或几乎没有接触过AT&T汇编语言,虽然这些汇编代码都是Intel风格的.但在Unix和Linux系统中,更多采用的还是AT&a ...
- Google解决跨域
1.添加 --disable-web-security --user-data-dir=D:\tmp 2.在D的根目录新建tmp文件夹
- android layout
android的视图分为两类,一类是布局,另一个类是控件 一.LinearLayout(线性布局) 最常用布局之一,线性布局的特性是每添加一个控件默认会在上个控件的下面占一行. <LinearL ...
- (4)Swing布局
一.FlowLayout-流布局 新增第一个组件后默认在第一行的居中位置,之后 组件按照加入的先后顺序按照设置的对齐方式从左向右排列 二.borderLayout-边框布局 容器划分为东.西.南.北. ...
- 小窥React360——用React创建360全景VR体验
前言 混迹VR届的发烧友兼开发者们一定不要错过这款FaceBook推出的跨端VR开发框架——React360,称为360全景体验框架更为准确,因为其前身是FaceBook和Oculus2017年 ...
- codevs——1501 二叉树最大宽度和高度
1501 二叉树最大宽度和高度 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题解 题目描述 Description 给出一个二叉树,输出它的 ...