jQuery Ajax使用实例


Posted in Javascript onApril 16, 2015

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

四、$.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);   
  } 
});
Javascript 相关文章推荐
Extjs中常用表单介绍与应用
Jun 07 Javascript
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
Vue实现附件上传功能
May 28 Javascript
javascript等号运算符使用详解
Apr 16 #Javascript
php常见的页面跳转方法汇总
Apr 15 #Javascript
jquery图片切换实例分析
Apr 15 #Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 #Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 #Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 #Javascript
jquery实现简单的无缝滚动
Apr 15 #Javascript
You might like
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
vue 实现v-for循环回来的数据动态绑定id
2019/11/07 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
Linux中Python 环境软件包安装步骤
2016/03/31 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
基于python实现聊天室程序
2018/07/27 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
python如何调用百度识图api
2020/09/29 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
python全栈开发语法总结
2020/11/22 Python
员工培训协议书
2014/09/15 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL