jQuery Ajax使用实例
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.js"></script>
Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的差异了。
$.post、$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()
一、$.ajax的一般格式
|
1
2
3
4
5
6
7
|
$.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); } }); jQuery Ajax使用实例的更多相关文章
- jquery ajax 方法实例
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 直接上代码, ajax实例: $.ajax({ type : & ...
- jquery ajax 保存讲解
jquery ajax 参数传递与数据保存实例是一款适合于初学者用的,首先我们是讲一下关于如何利用ajax +php进行数据操作,然后再详细的介绍关于jquery ajax的帮助说明. jquery ...
- Java程序员之JS(一) 之 JQuery.ajax
背景:紧着现在项目的需要,先从JQuery.ajax出发,主要需求是通过 js 调用Java 代码,从而适应现在的项目. 先从几个概念开始讲解: 一. 什么是Deferred Deferred 对象 ...
- jQuery Ajax 实例 ($.ajax、$.post、$.get)
jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...
- ASP.NET使用jQuery AJAX实现MD5加密实例
一个asp.net ajax例子,使用jquery,实现md5加密.在.NET 4.0,Visual Studio 2010上成功运行. 效果体验:http://tool.keleyi.com/t/m ...
- JavaScript强化教程——jQuery AJAX 实例
什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...
- jQuery AJAX实例
<html><head><title>jQuery Ajax 实例演示</title></head><script language= ...
- jquery ajax jsonp跨域调用实例代码
今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...
- jQuery Ajax 实例 全解析
jQuery Ajax 实例 全解析 jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我 ...
随机推荐
- Eclipse导入项目: No projects are found to import
Eclipse导入项目: No projects are found to import 如果发导入工程import的时候,出现”No projects are found to import” 的 ...
- 【iOS9系列】- CoreSportlight内容索引的使用
[iOS9系列]- CoreSportlight内容索引的使用 前言 在iOS9中新增加了的CoreSportlight内容索引,这个还是比较实用的,当我们的App比较多的时候,我们会实用iOS系统的 ...
- 【iOS系列】-iOS查看沙盒文件图文教程(真机+模拟器)
[iOS系列]-iOS查看沙盒文件图文教程(真机+模拟器) 1:模拟器 1.1 方法1: 程序中打印一下的地址,能直接前往沙盒路径. NSString *path = [NSSearchPathFor ...
- ASP.NET MVC3 自定义编辑模版
在View中显示Model中的各字段,默认是使用htmlhelper的EditorFor方法,在界面上显示的文本框.而使用EditorTemplates可在View上为特定字段显示自定义的界面.比如购 ...
- aspx后台引用不到服务器控件
从其他地方拷贝的页面到自己的项目,后台CS代码引用hidden时,提示找不到,百度,发现可能是网站项目和Web应用程序的区别,右键aspx转化为Web应用程序即可.
- select标签multiple属性的用法
前些日子公司让做一个功能模块.对于里面一个小功能费了些周折,现将其总结一下: 一.实现效果: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ2FvaHVh ...
- Genymotion设置网络桥接
1,打开Genymotion,找到对应的模拟器,点击“设置”按钮 2,在网络选项中选择桥接 Bridge
- Android4.4.2系统添加自定义按键【转】
本文转载自:http://developer.t-firefly.com/thread-251-1-1.html 网上存在一些关于Android系统添加自定义按键的文章,但大多针对Android2.3 ...
- CodeForces-204E:Little Elephant and Strings (广义后缀自动机求出现次数)
The Little Elephant loves strings very much. He has an array a from n strings, consisting of lowerca ...
- bzoj 2169 连边 —— DP+容斥
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2169 就和这篇博客说的一样:https://blog.csdn.net/WerKeyTom_ ...