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学习笔记之获取当前目录的实现代码
Dec 14 Javascript
javascript获取当前日期时间及其它操作函数
Jan 11 Javascript
js中设置元素class的三种方法小结
Aug 28 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
node.js将MongoDB数据同步到MySQL的步骤
Dec 10 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 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计算数组不为空元素个数的方法
2014/01/27 PHP
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
Javascript 读后台cookie代码
2008/09/15 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
vue实现简单瀑布流布局
2020/05/28 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
python单例模式实例解析
2018/08/28 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
python操作cfg配置文件方式
2019/12/22 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
Python3 利用face_recognition实现人脸识别的方法
2020/03/13 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
勇敢的心观后感
2015/06/09 职场文书
利用Python实现Picgo图床工具
2021/11/23 Python
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android