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 sudoku 数独智力游戏生成代码
Mar 27 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
Bootstrap Navbar Component实现响应式导航
Oct 08 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
JavaScript中AOP的实现与应用
May 06 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 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
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
PHP之COOKIE支持详解
2010/09/20 PHP
浅析PHP 按位与或 (^ 、&amp;)
2013/06/21 PHP
mac下安装nginx和php
2013/11/04 PHP
php 浮点数比较方法详解
2017/05/05 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
Django继承自带user表并重写的例子
2019/11/18 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
python操作cfg配置文件方式
2019/12/22 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
Python多线程的退出控制实现
2020/08/10 Python
征婚广告词
2014/03/17 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
Python基础之条件语句详解
2021/06/16 Python
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS