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 相关文章推荐
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
用js实现简单算法的实例代码
Sep 24 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 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获取对象属性的三种方法实例分析
2019/01/03 PHP
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
详解Node.js串行化流程控制
2017/05/04 Javascript
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
python 换位密码算法的实例详解
2017/07/19 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
Python ellipsis 的用法详解
2020/11/20 Python
python解包概念及实例
2021/02/17 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
英国户外玩具儿童游乐设备网站:TP Toys(蹦床、攀爬框架、秋千、滑梯和游戏屋)
2018/04/09 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
电脑饰品店的创业计划书
2014/01/21 职场文书
春风行动实施方案
2014/03/28 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL