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字符串String和Array操作的有趣方法
Dec 18 Javascript
jquery设置元素的readonly和disabled的写法
Sep 22 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
三种AngularJS中获取数据源的方式
Feb 02 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 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 define的第二个参数使用方法
2013/11/04 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
PHP图片加水印实现方法
2016/05/06 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
Python多进程通信Queue、Pipe、Value、Array实例
2014/11/21 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
Python爬虫爬取、解析数据操作示例
2020/03/27 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
Pandas的Apply函数具体使用
2020/07/21 Python
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
酒店公关部经理岗位职责
2013/11/24 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
2015年科协工作总结
2015/05/19 职场文书
幼儿园六一儿童节主持词
2015/06/30 职场文书
js之ajax文件上传
2021/05/13 Javascript
Python基于百度AI实现抓取表情包
2021/06/27 Python
Pandas 稀疏数据结构的实现
2021/07/25 Python
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers