视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
Jquery中Ajax语法实例总结
2020-11-27 20:21:39 责编:小采
文档


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

[javascript]

  1. <span style="font-size:18px;"> // 删除

  2. $.ajax({

  3. type : "POST", //提交方式

  4. url : "${pageContext.request.contextPath}/org/doDelete.action",//路径

  5. data : {

  6. "org.id" : "${org.id}"

  7. },//数据,这里使用的是Json格式进行传输

  8. success : function(result) {//返回数据根据结果进行相应的处理

  9. if ( result.success ) {

  10. $("#tipMsg").text("删除数据成功");

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

  12. } else {

  13. $("#tipMsg").text("删除数据失败");

  14. }

  15. }

  16. });

  17. </span>

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

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

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

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

[javascript]

  1. <span style="font-size:18px;"> $(function(){

  2. var options = {

  3. beforeSubmit : function() {//处理以前需要做的功能

  4. $("tipMsg").text("数据正在保存,请稍候...");

  5. $("#insertBtn").attr("disabled", true);

  6. },

  7. success : function(result) {//返回成功以后需要的回调函数

  8. if ( result.success ) {

  9. $("#tipMsg").text("机构保存成功");

  10. //这里是对应的一棵树,后边会介绍到,

  11. // 控制树形组件,增加新的节点

  12. var tree = window.parent.treeFrame.tree;

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

  14. } else {

  15. $("#tipMsg").text("机构保存失败");

  16. }

  17. // 启用保存按钮

  18. $("#insertBtn").attr("disabled", false);

  19. },

  20. clearForm : true

  21. };

  22. $('#orgForm').ajaxForm(options); //通过Jquery.Form中的ajaxForm方法进行提交

  23. });

  24. </span>

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

下载本文
显示全文
专题