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函数中参数传递问题示例探讨
Jul 31 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 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 UTF8中文字符截断函数代码
2012/09/11 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
php实现telnet功能示例
2014/04/08 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
jQuery简单实现提交数据出现loading进度条的方法
2016/03/29 Javascript
js实现文字截断功能
2016/09/14 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
微信小程序实现跟随菜单效果和循环嵌套加载数据
2017/11/21 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
python使用pymysql实现操作mysql
2016/09/13 Python
python的多重继承的理解
2017/08/06 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
python 默认参数相关知识详解
2019/09/18 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
小学综合实践活动总结
2014/07/07 职场文书
安全员岗位职责范本
2015/04/11 职场文书
golang 语言中错误处理机制
2021/08/30 Golang
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server