Ajax_使用 jQuery 实现Ajax

【jQuery中的Ajax】

1.jQuery对Ajax操作进行了封装,在jQuery中最底层的方法时 $.ajax()。第二层是 load() , $.get()  和 $.post(),第三层是 $.getScript() 和 $.getJSON()。

详情请查看jQurey的API。

【load()方法】

1.load()方法时jQuery中最简单和常用的Ajax方法,能载入远程的HTML代码并插入到DOM中,它的结构是:load(url [,data] [,callback])

2.程序员只需要使用jQurey选择器为HTML片段指定目标位置,然后将要加载的文件的url作为参数传递给load()方法即可。

3.load()方法-----细节

(1)如果只需要加载目标HTML页面内的某些元素,则可以通过load()方法的URL参数来达到目的。通过URL参数指定选择符,就可以方便的从加载过来的HTML文档中选出所需要的内容,load()方法的URL参数的语法结构为“url selector”(注意:url的选择器之间有一个空格)

(2)传递方式:load()方法的传递参数根据参数data来自动自定,如果没有参数传递,采用GET方式传递,否则采用POST方式。

(3)对于必须在加载完才能继续的操作,laod()方法提供了回调函数,该函数由三个参数:代表请求返回内容的data;代表请求状态的textStatus对象和XMLHttpoRequest对象。

【小结】

1.什么是Ajax?

不用刷新页面,但可以和服务器通信的方式。使用Ajax的主要方式是XMLHttpRequest对象。

2.使用XMLHttpRequest对象实现Ajax[了解]。

3.Ajax传输数据的3中方式:

1)XML:笨重,解析困难,但 XML 是通用的数据交换格式。

2)HTML:不需要解析可以直接放到文档中,若仅更新一部分区域,但传输的数据不是很方便,且HTML代码需要拼装完成。

3)JSON:小巧,有面向对象的特征,且有很多第三方的jar包可以把Java对象或集合转为JSON字符串。

4.使用jQuery完成Ajax操作

1)load()方法:可以用于HTML文档的元素节点,把结果直接加为对应节点的子元素,通常而言,load()方法加载完后数据是一个HTML片段。

var $obj = ...
var url = ...

var args = {key:value,...}

$obj.load(url,args);

2) $.get,$.post,$.getJSON:更加灵活,出去使用load的方法情况,大部分时候都使用这三个方法。

I。基本使用

//url:Ajax请求的目标URL

//args:传递的参数:JSON格式

//data:Ajax响应成功后的数据,可能是XML,HTML,JSON

$.get(url,args,function(data){

})

II。请求JSON数据

$.get(url,args,function(data){

},"JSON");

$.post(url,args,function(data){

},"JSON");

$.getJSON(url,args,function(data){

})

原文地址:https://www.cnblogs.com/zhzcode/p/9734570.html

时间: 2024-10-11 23:32:52

Ajax_使用 jQuery 实现Ajax的相关文章

Ajax_使用jQuery 实现Ajax

get/post 方式 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Document</title> 6 </head> 7 <script type="text/javascript" src="jquery.js"&

Js原生Ajax和Jquery的Ajax

一.Ajax概述 1.什么是同步,什么是异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡死 2.Ajax的运行原理 页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到服务器端,在这段时间里,客户端可以任意进行任意操作,直到服务器端将数据返回给Ajax引擎后,会触发你设置的事件,从而执行自定义的js逻辑代码完成某种页面1 功能. 二

jQuery与Ajax的应用

Ajax的全称:Asynchronous JavaScript and XML (异步Javascript和XML) 传统模式中,数据提交通过表单方式实现,数据的获取是靠全页面刷新来重新获取整页的内容.而Ajax模式只是通过XMLHttpRequest对象向服务器端提交数据,即按需发送.因为Ajax需要与Web服务器端进行交互,所以用个服务器,我这里用的是Tomcat.  1. 传统Js的Ajax操作 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

JQuery中$.ajax()方法参数详解

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 delete也可以使用,但仅部分浏览器支持. timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设 置. async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求. 如果需要发送同步请求,请将此选项

【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件

Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯.这些特性使JSON成 为理想的数据交换语言.易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络

Jquery的AJAX应用详解

案例一:取得服务端当前时间 简单形式:jQuery对象.load(url),返回结果自动添加到jQuery对象代表的标签中间 <body> 当前时间: <span id="time"></span><br /> <input type="button" value="获取时间" /> <script type="text/javascript"> $(&q

ajax系列之用jQuery的ajax方法向服务器发出get和post请求

打算写个ajax系列的博文,主要是写给自己看,学习下ajax的相关知识和用法,以更好的在工作中使用ajax. 假设有个网站A,它有一个简单的输入用户名的页面,界面上有两个输入框,第一个输入框包含在一个form表单里用来实现form提交,第二个输入框是单独的.没有包含在form里,下面就用这两个输入框来学习下jQuery的ajax. 1,前端的html和javascript代码 页面html 1 <main style="text-align: center; margin: 200px a

jquery中$.ajax方法提交表单

function postdata(){                        //提交数据函数 $.ajax({                                //调用jquery的ajax方法 type: "POST",                       //设置ajax方法提交数据的形式 url: "ok.php",                      //把数据提交到ok.php data: "writer=

jQuery之ajax错误调试分析

jQuery之ajax错误调试分析 jQuery中把ajax封装得非常好.但是日常开发中,我偶尔还是会遇到ajax报错.这里简单分析一下ajax报错 一般的jQuery用法如下,ajax通过post方式提交"汤姆和老鼠"这段数据到xxx.php文件中.成功后则打印返回的数据,失败则打印错误原因. 1 2 3 4 5 6 7 8 9 10 $.ajax({     url:"xxx.php",     type:"post",     dataty