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 相关文章推荐
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
TypeScript 中接口详解
Jun 19 Javascript
原生javascript实现解析XML文档与字符串
Mar 01 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
JavaScript原型式继承实现方法
Nov 06 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 Javascript
详解Js模块化的作用原理和方案
Apr 29 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 mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
基于Angularjs实现分页功能
2016/05/30 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
Python中的yield浅析
2014/06/16 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
python2和python3哪个使用率高
2020/06/23 Python
Django REST 异常处理详解
2020/07/15 Python
详解pandas映射与数据转换
2021/01/22 Python
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
2014年优秀班主任工作总结
2014/12/16 职场文书
优秀共产党员推荐材料
2014/12/18 职场文书
同学聚会通知书
2015/04/20 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP