JQuery中Ajax的操作完整例子


Posted in Javascript onMarch 07, 2017

 Java软件开发中,后台中我们可以通过各种框架,像SSH等进行对代码的封装,方便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进行封装控制,使我们只需要进行一些简单配置就可以实现;而spring进行了对各种对象的管理进行封装,提供了AOP编程的方式,大大方便了我们;而hibernate和IBatis则是对JDBC代码进行封装,不需要我们每次都写那些重复而繁杂的JDBC代码。 

         前台呢,对于页面一些效果,验证等,我们都是通过JavaScript语言进行完成的,但是它也就像我们的Java代码一样,是最前台语言最基础的,而jQuery则是对js代码进行封装方便我们前台代码的编写,而且它还有一个非常大的优势就是解决了浏览器的兼容问题,这也是我们使用它非常重要的原因之一。 

         而现在为了满足用户的需求,Ajax(Asynchronous Javascript + XML)异步刷新起到了无可比拟的作用,以前写Ajax操作,总是需要我们想JDBC代码一样进行几个必备的步骤:

AJAX——核心XMLHttpRequest对象,而JQuery也对Ajax异步操作进行了封装,这里看一下几种常用的方式。 $.ajax,$.post, $.get, $.getJSON。 

         一, $.ajax,这个是JQuery对ajax封装的最基础步,通过使用这个函数可以完成异步通讯的所有功能。也就是说什么情况下我们都可以通过此方法进行异步刷新的操作。但是它的参数较多,有的时候可能会麻烦一些。看一下常用的参数:       

var configObj = {
  method //数据的提交方式:get和post
  url //数据的提交路劲
  async //是否支持异步刷新,默认是true
  data //需要提交的数据
  dataType //服务器返回数据的类型,例如xml,String,Json等
  success //请求成功后的回调函数
  error //请求失败后的回调函数
 }

$.ajax(configObj);//通过$.ajax函数进行调用。 

           好,看一个实际的例子吧,看一个进行异步删除的例子:

<span style="font-size:18px;">   // 删除 
    $.ajax({ 
     type : "POST", //提交方式 
     url : "${pageContext.request.contextPath}/org/doDelete.action",//路径 
     data : { 
      "org.id" : "${org.id}" 
     },//数据,这里使用的是Json格式进行传输 
     success : function(result) {//返回数据根据结果进行相应的处理 
      if ( result.success ) { 
       $("#tipMsg").text("删除数据成功"); 
       tree.deleteItem("${org.id}", true); 
      } else { 
       $("#tipMsg").text("删除数据失败"); 
      } 
     } 
    }); 
</span>

           二,$.post,这个函数其实就是对$.ajax进行了更进一步的封装,减少了参数,简化了操作,但是运用的范围更小了。$.post简化了数据提交方式,只能采用POST方式提交。只能是异步访问服务器,不能同步访问,不能进行错误处理。在满足这些情况下,我们可以使用这个函数来方便我们的编程,它的主要几个参数,像method,async等进行了默认设置,我们不可以改变的。例子不再介绍。

url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式,xml, html, script, json, text,_default。 

        三,$.get,和$.post一样,这个函数是对get方法的提交数据进行封装,只能使用在get提交数据解决异步刷新的方式上,使用方式和上边的也差不多。这里不再演示。 

        四, $.getJSON,这个是进一步的封装,也就是对返回数据类型为Json进行操作。里边就三个参数,需要我们设置,非常简单:url,[data],[callback]。 

        其实会了$.ajax方法,其它的就都会使用了,都是一样的,其实非常简单。 

        但是这里还有一个问题,比较麻烦,就是如果页面数据量比较大,该怎么办呢?在常规表单的处理中,我们使用框架Struts2可以通过域驱动模式进行自动获取封装,那么通过ajax,如何进行封装呢?这里JQuery有一个插件,Jquery Form,通过引入此js文件,我们可以模仿表单Form来支持Struts2的域驱动模式,进行自动数据的封装。用法和$.ajax类似,看一下实际的例子,这里写一个保存用户的前台代码: 

<span style="font-size:18px;"> $(function(){ 
  var options = { 
   beforeSubmit : function() {//处理以前需要做的功能 
    $("tipMsg").text("数据正在保存,请稍候..."); 
    $("#insertBtn").attr("disabled", true); 
   }, 
   success : function(result) {//返回成功以后需要的回调函数 
    if ( result.success ) { 
     $("#tipMsg").text("机构保存成功"); 
          //这里是对应的一棵树,后边会介绍到, 
     // 控制树形组件,增加新的节点 
     var tree = window.parent.treeFrame.tree; 
     tree.insertNewChild("${org.id}", result.id, result.name); 
    } else { 
     $("#tipMsg").text("机构保存失败"); 
    } 
    // 启用保存按钮 
    $("#insertBtn").attr("disabled", false); 
   }, 
   clearForm : true 
  }; 
  $('#orgForm').ajaxForm(options); //通过Jquery.Form中的ajaxForm方法进行提交 
 }); 
</span>

       这样我们就不用再进行数据data的封装处理,大大简化了我们ajax的操作这样异步刷新的操作。综上为JQuery中ajax的操作,感觉使用多了,和form表单的处理还是非常相似的,只不过实现的功能不一样罢了。学习编程,其实就是学习对数据的流转处理,如何从前台获取,传输到服务器进行相应的处理,然后返回,进行相关的显示,把这个流程通过一些技术实现,就完成了软件的开发,感觉还是非常有意思的。 

     更多JQuery的学习,还需要我们通过查询api文档进行完成:http://hemin.cn/jq/

以上所述是小编给大家介绍的JQuery中Ajax的操作完整例子,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript随机排序(随即出牌)
Sep 17 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 Javascript
JavaScript之Vue.js【入门基础】
Dec 06 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
ionic实现底部分享功能
May 11 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 Javascript
js实现左右轮播图
Jan 09 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 Javascript
js判断手机系统是android还是ios
Mar 07 #Javascript
jQuery设计思想
Mar 07 #Javascript
Node.js读取文件内容示例
Mar 07 #Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 #Javascript
AngularJS的Filter的示例详解
Mar 07 #Javascript
js上下视差滚动简单实现代码
Mar 07 #Javascript
js实现下一页页码效果
Mar 07 #Javascript
You might like
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
php在线代理转向代码
2012/05/05 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
JS模拟多线程
2007/02/07 Javascript
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
python格式化字符串实例总结
2014/09/28 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
酒店实习个人鉴定
2013/12/07 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
党员创先争优承诺书
2014/03/26 职场文书
简单租房协议书
2014/04/09 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
python基础之函数的定义和调用
2021/10/24 Python