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 相关文章推荐
自制基于jQuery的智能提示插件一枚
Feb 18 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
jQuery中val()方法用法实例
Dec 25 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
JS简单实现数组去重的方法示例
Mar 27 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 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
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
php实现递归与无限分类的方法
2015/02/16 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
分享php分页的功能模块
2015/06/16 PHP
纯php生成随机密码
2015/10/30 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
Firefox div高度自适应
2009/04/28 Javascript
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
PHP守护进程实例
2015/03/06 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
微信小程序实现tab切换效果
2017/11/21 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
React手稿之 React-Saga的详解
2018/11/12 Javascript
python输出指定月份日历的方法
2015/04/23 Python
Python对数据库操作
2016/03/28 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
python爬取个性签名的方法
2018/06/17 Python
python3实现磁盘空间监控
2018/06/21 Python
django的ORM操作 增加和查询
2019/07/26 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
了解AppleTalk协议吗
2014/04/01 面试题
《童趣》教学反思
2014/02/19 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
2015年学校总务工作总结
2015/07/20 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android