JQuery中Ajax的操作完整例子

JQuery中Ajax的操作完整例子

本文主要介绍了一个完整的JQuery中Ajax操作的例子,很不错,有参考价值。有需要的朋友可以参考一下。

在Java软件开发中,在后台,我们可以通过各种框架对代码进行封装,比如SSH,方便我们编写Java代码。比如Struts和Spring MVC对前台到动作的流程进行封装和控制,这样我们只需要一些简单的配置就可以实现。Spring封装了各种对象的管理,并提供AOP编程,极大的方便了我们。Hibernate和IBatis封装了JDBC代码,所以我们不需要每次都写那些重复复杂的JDBC代码。

至于前台,我们用JavaScript语言来完成页面的一些效果和验证,但就像我们的Java代码一样,是最基础的前端语言,而jQuery封装了js代码,方便我们前端代码的编写。而且在解决浏览器的兼容性问题上有很大的优势,这也是我们使用它非常重要的原因之一。

现在,为了满足用户的需求,Ajax(异步Javascript XML)异步刷新发挥了无可比拟的作用。过去,编写Ajax操作总是需要我们采取几个必要的步骤,比如JDBC代码:

AJAX——是核心的XMLHttpRequest对象,JQuery也封装了AJAX异步操作。下面就来看看几种常见的方式。$.ajax,$。帖子,美元。得到,$。getJSON .

首先,$。ajax,是JQuery封装ajax的最基础的一步,使用该函数可以完成异步通信的所有功能。也就是说,在任何情况下,我们都可以通过这种方法进行异步刷新。但是它的参数很多,有时候可能会比较麻烦。看看常用的参数:

var configObj={

方法//数据提交方法:get和post

Url //提交数据

Async //是否支持异步刷新,默认值为true。

数据//要提交的数据

DataType //服务器返回的数据类型,如xml、String、Json等。

成功//请求成功后的回调函数

错误//请求失败后的回调函数

}

$.Ajax(config obj);//通过$调用。ajax函数。

好了,我们来看一个实际的例子。让我们看一个异步删除的例子:

span style= font-size:18px;//删除

$.ajax({

类型: POST ,//提交方法

URL:“$ { pagecontext . request . context path }/org/do delete . action”,//path

数据:{

org.id : ${org.id}

},//数据,这里是以Json格式传输的

Success: function(result) {//根据结果处理返回的数据。

if ( result.success ) {

$(#tipMsg )。文本(“成功删除数据”);

tree.deleteItem(${org.id} ,true);

}否则{

$(#tipMsg )。文本(“未能删除数据”);

}

}

});

/span

第二,$。post,这个函数实际上进一步封装了$。ajax,减少参数,简化操作,但是适用范围更小。$.post简化了数据提交方式,只能通过POST提交。它只能异步访问服务器,不能同步访问,也不能处理错误。在这些条件下,我们可以使用这个函数来方便我们的编程。它的主要参数如method和async都是默认设置的,我们无法更改。例子就不再介绍了。

Url:发送请求地址。

数据:要发送的键/值参数。

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

Type:返回内容格式,XML,HTML,Script,JSON,Text,_ default。

3.$.得到,像美元。post,这个函数封装了get方法提交的数据,只能用来解决get提交的数据的异步刷新,和上面类似。这里不再演示了。

四美元。getJson,这是进一步的封装,也就是把Json作为返回数据类型的操作。我们需要设置的参数只有三个,非常简单:url,[数据],[回调]。

事实上,如果你知道美元。ajax方法,其他都可以用。都一样。其实很简单。

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

span style= font-size:18px;$(function(){

var选项={

BeforeSubmit: function() {//处理之前需要完成的函数

$(tipMsg )。文本(数据正在保存,请稍候.);

$(#insertBtn )。attr(disabled ,true);

},

Success: function(result) {//成功后返回所需的回调函数

if ( result.success ) {

$(#tipMsg )。文本(“机构保存成功”);

//下面是对应的树,后面会介绍,

//控制树组件并添加新节点。

var tree=window . parent . tree frame . tree;

tree.insertNewChild(${org.id} ,result.id,result . name);

}否则{

$(#tipMsg )。文本(“机构保存失败”);

}

//启用保存按钮

$(#insertBtn )。attr(disabled ,false);

},

clearForm:真

};

$(#orgForm )。ajaxForm(选项);//通过Jquery中的ajaxForm方法提交。形式

});

/span

这样就不需要对数据资料进行打包,大大简化了ajax操作等异步刷新操作。综上所述,JQuery中ajax的操作用的太多了,和表单表单的处理很像,只是功能不同。学习编程其实就是学习如何传输数据,如何从前台获取,如何传输到服务器进行相应的处理,然后如何返回和显示。通过一些技术实现这个过程,完成软件开发,还是很有意思的。

为了学习更多关于JQuery的知识,我们需要通过查询api文档来完成它:http://hemin.cn/jq/

以上是边肖介绍的JQuery中Ajax操作的完整例子。希望对你有帮助。如果您有任何问题,请给我留言,边肖将及时回复您。非常感谢您对我们网站的支持!

JQuery中Ajax的操作完整例子