位置: 编程技术 - 正文
Jquery ajax基础教程
编辑：rootadmin推荐整理分享Jquery ajax基础教程，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
jQuery的Ajax带来了无需刷新的web页面革命。这里就详细介绍一下jQuery所涉及到的Ajax操作。（无需特殊说明，均需要有服务器配置，这里本人用的是Tomcat 7）
1.基于请求加载文件数据
这里的请求通常都是网页的某些操作，如点击等。
而其加载数据的类型归类为以下四种：a.加载HTML文件；b.加载JSON文件；c.加载Javascript文件；d.加载XML文件。
其对应的四种加载方法分别是：load、getJSON、getScript、get。
a.加载HTML文件
把编写好的HTML文件加载到网页中。例如：
这里a.html也是放在服务器端的一个已经编写好的页面文件，直接调用load，就可以让所匹配的目标内载入HTML内容。
b.加载JSON文件
把编写好的JSON文件加载到网页中。例如：
getJSON方法第一个参数是指加载的文件路径，第二个参数是一个加载完成以后的回调函数。通过这个回调函数，就可以对加载好的data进行操作。重复的部分使用each循环处理。最后将拼凑好的html字符串使用html方法加入到目标id=dictionary的元素中。
c.加载Javascript文件
加载Javascript文件和加载HTML文件类似。这里需要注意的是，使用getScript方法加载进来的Javascript会根据当下Javascript环境直接运行。例如：
d.加载XML文件
jQuery中可以使用get方法加载XML文件。例如：
XML文件有一个特点就是，你可以像用jQuery操作HTML那样操作XML的那些元素。如使用attr方法、text方法等等。
2.基于Get方法向服务器获取数据
之前的例子都是从服务器上静态的获取数据文件。而Ajax的价值不只于此，通过get方法从服务器动态的获取数据，为web页面无刷新的实现提供了莫大的帮助。
下面就使用get方法从服务器获取一段所需要的数据。这里，本人结合J2EE的Struts2框架和TOMCAT搭建的服务器端。具体服务器端多种多样，可以是php+apache或者其他什么的都可以。
操作如下，用户点击Eavesdrop则发送get方法到服务器，取得Eavesdrop的数据，并且返回json值，然后在jQuery中装配。
代码如下：
这里要说明的是由于struts2配置，返回的时候在需要的数据外又打了一层包，用于表示结果内容的resultMSG和是否ajax访问成功的success字段。所以使用了2次eval解包。
这里我后台java程序传递过来的并非配置好的HTML，而是仅仅是json类型的数据，本人认为在java层面编写html并传递不如直接传递数据方便，以后修改样式或者页面结构也都不如直接修改javascript方便。
通过get方法获得服务器数据，相当于向服务器提交如下这种请求：EGet.action&#;term=XXX
下面放出java后台文件代码：
1.EGet.java
这个action中的数据本人直接配置了，这里只是做一个示范使用。真正的这些数据在项目中一般是存放在数据库中的。由于这主要是jQuery方面的小示例，就不弄那么麻烦了。
2.Terms.java
这个类纯粹就是一个pojo类。没有什么特别的方法。
3.struts.xml
这个是struts2的json方式传递配置
这里可以看到includeProperties里所配置的外面一层json，success和resultMSG。这在实际中很好用。如果服务器中没有取得需要的值，虽然ajax访问成功，但是获得的结果并不算成功，因为没有取得需要的值。这里加入了success标示，方便前台jQuery操作。
基于其他方法获取服务器数据从写法上与get基本一致，如post方法、load方法。这里就不再赘述了。
3.动态提交表单
通过jQuery的AJAX支持，可以让我们很方便的动态提交表单而不用刷新页面。
如下面例子：
这个例子援引的数据还是上一个EGet.action所用的那个数据。程序的操作过程基本是：
首先调用这个 preventDefault();这个方法在注释里也说明了，用于阻止事件冒泡带来的不便与麻烦。
接下来通过$()获得input的元素，使用val方法获得其值，接下来的使用方法与上例基本相同。
这里也可以使用serialize方法将input元素序列化成如下格式“term=xxx”这样。不过由于服务器端的java程序中的那些数据时硬编码的，所有，不是太方便用，就没用。
4.关于Ajax的观察员函数
jQuery包含了2个全局的ajax观察员函数：ajaxStart和ajaxStop。
分别在执行ajax操作的起始和结束时调用。例如：
这里无论哪个a标签触发ajax操作，包括静态载入文件和动态服务器访问，都会触发ajaxStart和ajaxStop。关于错误处理，常用的三个函数：success、complete、error。
下面以error为例：
可以以连缀的写法将error方法放置于get方法之后：“$.get().error()”这样。刚才看了一下，这个可以将Tomcat的报错，加载到页面之上。这在有的时候还是很有用的。如图：
不过不知道为何这个将我原有样式也覆盖了一些，如果有哪位网友知道，麻烦指正一下问题所在。谢谢了。
5.Ajax和事件
Ajax动态访问服务器以后生成的元素，如果想绑定事件的话，一种方法是每次取到都重新绑定处理程序，这种相对来说比较简单，但是不适合DOM结构经常变化的场景。如果DOM结构经常变化，那么就需要用live方法，实现事件委托。
live用法与bind一样。
关于jquery ajax基础教程今天小编就给大家介绍到这里，后续还会持续给大家介绍，希望大家继续关注积木网网站，有你们的关注我们会做的更好，谢谢！
jQuery-1.9.1源码分析系列（十）事件系统之事件包装 在上篇文章给大家介绍了jQuery-1.9.1源码分析系列（十）事件系统之事件体系结构，本篇继续给大家介绍jquery1.9.1源码分析系列相关知识，具体内容请看下
jQuery实现分隔条左右拖动功能 本文实例讲述了jQuery实现分隔条左右拖动功能的实现代码。分享给大家供大家参考。具体如下：运行效果截图如下：具体内容如下!DOCTYPEHTMLPUBLIC"-//W3C//DT
jquery实现select选择框内容左右移动代码分享 本文实例讲述了select选择框内容左右移动添加删除。分享给大家供大家参考。具体如下：select选择框内容左右移动，简单实用，选中选项内容，点击移
标签: Jquery ajax基础教程
本文链接地址:https://www.jiuchutong.com/biancheng/370555.html 转载请保留说明！上一篇：谈谈Jquery ajax中success和complete有哪些不同点
下一篇：jQuery-1.9.1源码分析系列（十）事件系统之事件包装(jquery3.2.1)
