玩转jquery的ajax请求。 .

最新推荐文章于 2024-05-03 11:47:20 发布
最新推荐文章于 2024-05-03 11:47:20 发布
阅读量49 收藏
点赞数
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/yangjin-55/archive/2012/11/22/2783289.html
版权

jquery中封装了一些ajax请求的方法，很实用。

比如.ajaxComplete()——请求完成时.ajaxError()——请求失败时.ajaxSend()——在Ajax请求发送时附加一个function去执行.ajaxStart()——请求开始时，.ajaxStop()——请求结束时.ajaxSuccess()——请求成功时.load()——从服务端加载数据并将返回的HTML替换到选择的元素中jQuery.post()——使用HTTP POST请求加载服务端数据.serialize()——将form元素集编码成一个字符串以便提交.serializeArray()——将form元素集编码成一个键值对数组jQuery.param()——创建一个序列化的数组或对象，使得适用于一个URL查询字符串或者Ajax请求jQuery.getScript()——从服务端加载一个js文件，然后执行它jQuery.getJSON()——从服务端加载用JSON编码过的数据jQuery.get()——从服务端加载数据简单说其中两点一、.ajaxStart()和.ajaxStop()

 

  1. <!DOCTYPE HTML>   
  2. <html>  
  3. <head>  
  4. <script type="text/javascript" src="test/jquery-1.7.2.min.js"></script>  
  5. <script type="text/javascript">  
  6.   
  7. $(document).ready(function(){  
  8. $('.log1').ajaxStart(function() {  
  9.   $(this).text('Triggered ajaxStart handler.');  
  10. });  
  11. $('.log2').ajaxStop(function() {  
  12.   $(this).text('Triggered ajaxStop handler.');  
  13. });  
  14. $('.trigger').click(function() {  
  15.   $('.result').load('xixi.html');  
  16. });  
  17. });  
  18. </script>  
  19. </head>  
  20. <body>  
  21. <div class="trigger">Trigger</div>  
  22. <div class="result"></div>  
  23. <div class="log1"></div>  
  24. <div class="log2"></div>  
  25. </body>  
  26. </html>   

代码中class为result的元素load了一个xixi.html,此文件中的内容随便，只要存在这个文件就行。js执行方法的顺序是

先

[html]  view plain copy print ?
  1. $(this).text('Triggered ajaxStart handler.');  

然后

加载晚xixi.html里的内容到class为result的元素中

最后

[html]  view plain copy print ?
  1. $(this).text('Triggered ajaxStop handler.');  
二、.ajaxSend()、.ajaxComplete()、.ajaxSuccess()以及.ajaxError()

 

[html]  view plain copy print ?
  1. <!DOCTYPE HTML>   
  2. <html>  
  3. <head>  
  4. <script type="text/javascript" src="test/jquery-1.7.2.min.js"></script>  
  5. <script type="text/javascript">  
  6.   
  7. $(document).ready(function(){  
  8. $('.log1').ajaxStart(function() {  
  9.   $(this).text('Triggered ajaxStart handler.');//【1】  
  10. });  
  11. $('.log2').ajaxStop(function() {  
  12.   $(this).text('Triggered ajaxStart handler.');//【5】  
  13. });  
  14. $('.result').ajaxSend(function() {  
  15.   $(this).text('Triggered ajaxSend handler.');//【2】  
  16. });  
  17. $('.result').ajaxComplete(function() {  
  18.   $(this).text('Triggered ajaxComplete handler.');//【4】  
  19. });  
  20. $('.result').ajaxSuccess(function() {  
  21.   $(this).text('Triggered ajaxSuccess handler.');//【3】  
  22. });  
  23. $(".result").ajaxError(function() {  
  24.   $(this).text( "Triggered ajaxError handler." );  
  25. });  
  26. $('.trigger').click(function() {  
  27.   $('.result').load('xixi.html');  
  28. });  
  29. });  
  30. </script>  
  31. </head>  
  32. <body>  
  33. <div class="trigger">Trigger</div>  
  34. <div class="result"></div>  
  35. <div class="log1"></div>  
  36. <div class="log2"></div>  
  37. </body>  
  38. </html>   

上述代码中还是class为result的加载一个html文件。

执行顺序代码中已经标出

如果请求过程中出现什么错误，比如说文件不存在等，就会执行.ajaxError()中的方法而不是.ajaxSuccess()中的。

以前总是对ajax认识很乱，现在有个全面的认识，总结一下，希望共同学习，另外请求中的方式是HTTP GET还是HTTP POST也是值得研究的。

jquery中介绍ajax的地址ajax的使用

转载于:https://www.cnblogs.com/yangjin-55/archive/2012/11/22/2783289.html

weixin_30315723
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax无刷新分页(jQuery+Json)
08-09
Ajax无刷新分页(jQuery+Json) 做了一个用jQuery来实现的用户控件,VS2008+Access 只用来玩玩.所以就用Access数据库了 jQuery+ashx+JSON 用ashx来接收请求,数据格式为JSON 实现了批量(选择)操作,编辑接口(反回...
jquery中的ajax 网络请求
代码小疯子
04-02 535
玩转jquery中的ajax网络请求，岁月如梭，不知是何时的整理了，我回忆起了jquery的年代
玩转jquery的ajax请求。
cangkukuaimanle——你满了么
11-15 2047
jquery中封装了一些ajax请求的方法，很实用。 比如.ajaxComplete()——请求完成时.ajaxError()——请求失败时.ajaxSend()——在Ajax请求发送时附加一个function去执行.ajaxStart()——请求开始时，.ajaxStop()——请求结束时.ajaxSuccess()——请求成功时.load()——从服务端加载数据并将返回的HTML替换到选择的
带你玩转Ajax
MX_YANG_的博客
10-15 92
jQuery中的Ajax 浏览器中提供的XMLHttpRequest用法比较复杂，所以jQuery对XMLHttpRequest进行了封装，提供了一系列Ajax相关的函数，极大的降低了Ajax的使用难度。 jQuery中发起Ajax请求的最常用的三个方法：$.get()， $.post()，$.ajax()。 $.get()函数的语法 jQuery中的$.get()函数的功能单一，专门用来发送get请求，从而将服务器上的资源请求到客户端进行使用 $.get('url',[data],[callb
在easyui中如何使用ajax请求数据,Ajax 中正常使用jquery-easyui (转)
weixin_36016076的博客
08-05 404
Arlenmbx！！！！我无限制的以安逸为想法 其实生活的不安逸 我所做的事情和思路到底正不正确? 我失败了? 我做不到? 我尝试做到? 我可以做到! 我能做到 我做到了我已经做到了 难道想法和现实是有区别的吗 有理想只是空 ...noip2015-day1-t2题意:有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编...
JAVA上百实例源码以及开源项目
01-03
　当用户发送第一次请求的时候，验证用户登录，创建一个该qq号和服务器端保持通讯连接得线程，启动该通讯线程，通讯完毕，关闭Scoket。 　QQ客户端登录界面，中部有三个JPanel,有一个叫选项卡窗口管理。还可以更新...
java开源包101
07-13
JVMine用Applets开发的扫雷游戏，可在线玩。 public class JVMine extends java.applet.Applet 简单实现！~ 网页表格组件 GWT Advanced Table GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页...
JAVA上百实例源码以及开源项目源代码
12-11
数字证书：从文件中读取数字证书，生成文件输入流,输入文件为c:/mycert.cer，获取一个处理X.509证书的证书工厂…… Java+ajax写的登录实例 1个目标文件 内容索引:Java源码,初学实例,ajax,登录 一个Java+ajax写的...
java开源包10
06-28
JVMine用Applets开发的扫雷游戏，可在线玩。 public class JVMine extends java.applet.Applet 简单实现！~ 网页表格组件 GWT Advanced Table GWT Advanced Table 是一个基于 GWT 框架的网页表格组件，可实现分页...
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
最新发布
XING的博客
05-03 491
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
element-ui的bug记录
nick_zhang的博客
04-29 385
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 809
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 131
注释很详细，直接上代码……
bpmn-js推荐几款常用的插件
飞云先生
04-30 78
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
stu_kk的博客
05-02 670
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
《ElementUI 基础知识》el-tabs header 监听鼠标中键滚动时左右滑动（ElementPlus同样适用）
前端技术
04-29 822
监听 el-tabs 头在鼠标 hover 时。滑动鼠标中键，可左右滑动！
表格隔行变色
weixin_54339833的博客
05-02 208
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 1020
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
jquery ajax请求
02-01
2. 发送Ajax请求：使用`$.ajax()`函数发送Ajax请求。该函数接受一个包含请求参数的对象作为参数。以下是一个示例： ```javascript $.ajax({ url: 'http://example.com/api/data', // 请求的URL method: 'GET', /...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值