jQuery Ajax 应用实例解析大全
- 格式:doc
- 大小:875.00 KB
- 文档页数:9
jquery $.ajax 同步调用实现原理jQuery .ajax 同步调用实现原理在前端开发中,经常会涉及到使用Ajax进行异步请求。
而jQuery库中的.ajax()方法是非常常用的一种实现方式。
.ajax()方法使用起来非常方便,可以对数据进行异步请求,并且可以设置回调函数来处理返回的数据。
但是有时候我们需要在请求完成之前进行一些操作,此时可以使用同步调用的方式来实现。
本文将详细介绍使用jQuery .ajax()方法进行同步请求的实现原理。
1. .ajax()方法简介.ajax()是jQuery库中用于发送HTTP请求的核心方法。
它是一个异步方法,可以向服务器发送GET、POST等请求,并处理服务器返回的数据。
.ajax()方法使用一个包含键值对的配置对象作为参数,可以设置请求的地址、请求方式、请求参数、回调函数等。
当请求完成时,可以在回调函数中处理返回的数据。
2. 异步请求与同步请求的区别在讲解实现原理之前,我们先来了解一下异步请求和同步请求的区别:- 异步请求:是指在发送请求的同时,主线程不会阻塞,而是继续执行后续的代码。
当请求完成后,会通过回调函数来处理返回的数据。
异步请求一般使用于需要较长时间才能返回结果的场景,如网络请求、文件上传等。
- 同步请求:是指在发送请求的同时,主线程会一直等待请求的响应结果,而不会继续执行后续的代码。
只有在请求完成后,才会继续执行下面的代码。
同步请求一般使用于需要立即获取结果的场景,如表单提交、页面加载等。
在默认情况下,.ajax()方法是异步请求的,即发送请求后会继续执行后续的代码。
而实现同步请求则需要额外的设置。
3. 同步请求的设置要实现同步请求,可以通过设置.ajax()方法的async选项为false来实现。
async的默认值为true,表示异步请求,当设置为false时表示同步请求。
示例代码:javascript.ajax({url: 'example',async: false,其他配置项...success: function(data) {处理返回的数据}});4. 同步请求的实现原理实现同步请求的关键在于事先知道请求需要的时间,以便正确地进行阻塞。
jqueryajax中各个事件执⾏顺序jquery ajax 中各个事件执⾏顺序如下:1.ajaxStart(全局事件)2.beforeSend3.ajaxSend(全局事件)4.success5.ajaxSuccess(全局事件)6.error7.ajaxError (全局事件)plete9.ajaxComplete(全局事件)10.ajaxStop(全局事件)下⾯看个例⼦:$("#ACCOUNT_TYPE").bind('click', function() {//alert( $(this).val());var msg="";if($(this).val()=="B134002")//托管{//msg="托管";msg="ACCOUNT_TYPE_COM_T";}else if($(this).val()=="B134001")//存管{//msg="存管";msg="ACCOUNT_TYPE_COM_C";}else if($(this).val()=="-")//存管和托管all{//msg="存管和托管";msg="ACCOUNT_TYPE_COM_ALL";}else{alert("参数错误!");return;}$("#ACCOUNT_TYPE_COMDiv_son").children().remove();//先清除所有⼦元素$.ajax({type:"post",url:"${ctx}/Rule/Combination/getdict",data:{type:msg},dataType:"json",success:function(json){//$(object).children(selector).remove(); // 删除object元素下满⾜selector选择器的⼦元素,不填写则默认删除所有⼦元素 for(var i=0;i<json.length;i++){var checkBox=document.createElement("input");//checkBox.setAttribute("type","checkbox");checkBox.setAttribute("type","radio");checkBox.setAttribute("id", json[i].value);checkBox.setAttribute("value", json[i].value);checkBox.setAttribute("name", "ACCOUNT_TYPE_COM");checkBox.setAttribute("checked", true);//checkBox.setAttribute("readonly", true);//var li=document.createElement("span");li.style.display = "block";li.style.width = 23+"%";li.style.float = "left";li.appendChild(checkBox);li.appendChild(document.createTextNode(json[i].label));$("#ACCOUNT_TYPE_COMDiv_son").append(li);}},beforeSend:function(mes){alert("beforeSend");},complete:function(){alert("complete");}});});运⾏这段代码,会先弹出 beforeSend 提⽰,然后加载success ⽅法⾥⾯的代码,最后弹出 complete 提⽰,这说明这段代码的⼏个⽅法的执⾏先后顺序是符合上⾯总结的顺序的!全局事件的例⼦:<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("div").ajaxStart(function(){$(this).html("<img src='/i/demo_wait.gif' />");alert("1.最先的全局⽅法");});$("button").click(function(){$("div").load("/example/jquery/demo_ajax_load.asp");});$("div").ajaxSend(function(){alert("2.发送前");});$("div").ajaxSuccess(function(){alert("3.成功后");});$("div").ajaxComplete(function(){alert("4.ajaxComplete");});$("div").ajaxStop(function(){alert("5.ajaxStop");});});</script></head><body><div id="txt"><h2>通过 AJAX 改变⽂本</h2></div><button>改变内容</button></body></html>每次点击 "改变内容" 的这个按钮,都会先加载⼀次demo_wait.gif 这个图⽚,然后执⾏ ajaxSend,然后执⾏ ajaxSuccess,然后执⾏ajaxComplete,然后执⾏ ajaxStop ,这个执⾏顺序也是符合上⾯总结的顺序的!____________________________________________________________________________________⼀、.ajaxStart()——ajax请求开始时触发描述:ajax请求开始时触发 .ajaxStart()的回调函数,全局的,所有的ajax都可以⽤写法:元素.ajaxStart(function({ajax请求开始时触发的代码})$("#loading").ajaxStart(function () {$(this).show(); //ajax请求开始时#loading元素显⽰});作⽤域:全局某个ajax不受全局⽅法的影响:⽅法:将$.ajax({})的global设为false$.ajax({url: "test.html",global:false});⼆、.ajaxStop()——ajax请求结束时触发描述:ajax请求结束时触发 .ajaxStop()的回调函数,全局的,所有的ajax都可以⽤写法:元素.ajaxStop(function({ajax请求结束时触发的代码})$("#loading").ajaxStop(function () {$(this).hide(); //ajax请求结束时#loading元素隐藏});作⽤域:全局某个ajax不受全局⽅法的影响:⽅法:将$.ajax({})的global设为false$.ajax({url: "test.html",global:false});_______________________________________________________________________。
jquery事件处理综合案例以jquery事件处理综合案例为题,列举如下:1. 案例一:点击按钮显示隐藏元素在页面上放置一个按钮和一个元素,当点击按钮时,通过jquery事件处理实现隐藏或显示该元素。
2. 案例二:鼠标悬停显示提示信息在一个段落中的某个词语上添加鼠标悬停事件,当鼠标悬停在该词语上时,通过jquery事件处理显示一个提示框,提示该词语的含义或解释。
3. 案例三:输入框字符限制在一个输入框中,通过jquery事件处理限制输入的字符个数,当输入字符个数超过限制时,给出相应的提示。
4. 案例四:点击图片切换在页面上放置多个图片,通过jquery事件处理实现点击图片时,切换显示不同的图片。
5. 案例五:拖拽效果在页面上放置一个可拖拽的元素,通过jquery事件处理实现拖拽效果,即用户可以通过鼠标拖动该元素改变其位置。
6. 案例六:下拉菜单在页面上放置一个下拉菜单,通过jquery事件处理实现点击菜单项时,显示或隐藏相应的内容。
7. 案例七:表单验证在一个表单中的输入框中添加jquery事件处理,实现表单验证功能,例如验证邮箱格式、手机号码格式等。
8. 案例八:动态加载内容通过jquery事件处理实现动态加载内容,例如点击按钮时,通过ajax请求数据,并将返回的数据动态添加到页面中。
9. 案例九:轮播图通过jquery事件处理实现轮播图效果,即自动切换显示不同的图片或内容。
10. 案例十:选项卡切换在页面上放置多个选项卡,通过jquery事件处理实现点击选项卡时,显示相应的内容,隐藏其他内容。
这是一些常见的jquery事件处理综合案例,通过这些案例可以学习和理解jquery事件处理的基本用法和实际应用。
希望对你有所帮助。
jquery中$.ajax()⽅法使⽤详解1.url说明:发送请求的地址(默认为当前页⾯),要求是String类型的参数,⽐如是.net下,"~wexin(控制器)/getweinxinmenu(动作)",2.type说明:请求⽅法(post或者get),默认是get,要求是String类型的参数。
其他的htpp请求如(put、delete)等也⽀持,但是要浏览器⽀持3.timeout说明:设置请求超时时间(毫秒),要求是number类型的参数。
此设置将覆盖$.ajaxSetup()⽅法的全局设置。
4.async说明:默认值为true,所有请求是异步,要求是Bool类型的参数,如果需要发送同步请求,将此项设置为false。
注意:同步时浏览器会被锁住。
5.cache说明:默认为true(当datatype为script时,默认为false)从浏览器缓存中加载请求信息,要求是Bool类型的参数。
6.data说明:发送到服务器的数据,要求是Object或string类型的参数。
如果已经不是字符串,将⾃动转换为字符串格式。
get请求中将附加在url 后。
防⽌这种⾃动转换,可以查看 processData选项。
对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。
如果是数组,JQuery将⾃动为不同值对应同⼀个名称。
例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。
7.dataType:说明:预期服务器返回的数据类型,要求为String类型的参数。
如果不指定,JQuery将⾃动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。
实例通过 AJAX 加载一段文本: jQuery 代码: $(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"",async:false}); $("#myDiv").html(htmlobj.responseText); }); });HTML 代码: <div id="myDiv"><h2>321 导航</h2></div> <button id="b01" type="button"></button>亲自试一试定义和用法ajax() 方法通过 HTTP 请求加载远程数据。
该方法是 jQuery 底层 AJAX 实现。
简单易用的高层实现见 $.get, $.post 等。
$.ajax() 返回其创建 的 XMLHttpRequest 对象。
大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获 得更多的灵活性。
最简单的情况下,$.ajax() 可以不带任何参数直接使用。
注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。
语法jQuery.ajax([settings])参数 settings描述 可选。
用于配置 Ajax 请求的键值对集合。
可以通过 $.ajaxSetup() 设置任何选项的默认值。
参数 options 类型:Object可选。
AJAX 请求设置。
所有选项都是可选的。
async 类型:Boolean 默认值: true。
默认设置下,所有请求均为异步请求。
如果需要发送同步请求,请将此选项设 置为 false。
注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
jq ajax 写法在使用jQuery 的Ajax 功能发送异步请求时,可以使用$.ajax() 方法。
以下是一个常见的jQuery Ajax 的写法示例:javascriptCopy Code$.ajax({url: 'your-url', // 请求的URLmethod: 'POST', // 请求方法,可以是GET、POST等data: { key1: 'value1', key2: 'value2' }, // 请求参数dataType: 'json', // 服务器返回的数据类型,这里设置为JSONsuccess: function(response) {// 请求成功时的回调函数console.log(response); // 输出服务器返回的数据},error: function(xhr, status, error) {// 请求失败时的回调函数console.log(error); // 输出错误信息}});在上述代码中,使用$.ajax() 方法发送一个POST 请求到指定的URL,并传递一些参数。
url 属性指定请求的URL,method 属性指定请求的方法(如GET 或POST),data 属性指定请求的参数。
dataType 属性指定了服务器返回的数据类型,这里设置为JSON。
success 属性指定了请求成功时的回调函数,当服务器成功返回数据时,该函数会被调用。
在示例中,我们将返回的数据打印到控制台。
error 属性指定了请求失败时的回调函数,当请求发生错误时,该函数会被调用。
在示例中,我们将错误信息打印到控制台。
你可以根据自己的需求修改示例代码中的URL、请求方法、参数和回调函数,以及处理返回数据的逻辑。
JQuery中的AJAX详解目录(?)[-]load()方法load(url,[data],[callback])url为被加载的页面地址data表示发送到服务器的数据,格式为key/valuecallback格式为:function(responseText,textStatus,XMLHttpRequest){ }//responseText:请求返回的内容//textStatus:请求状态:success、error、notmodified、timeout这4种//XMLHttpRequest:XMLHttpRequest对象load()方法的传递方式根据参数data来自动指定。
如果没有参数传递,则采用GET方式传递;反之,则自动转换为POST 方式[javascript]view plaincopyprint?1.$("#div1").load(2."jsp/feed.jsp", //如果为" jsp/feed.jsp .filterClass",则表示获取jsp页面中类名为filterClass的全部元素3.{4. name :clf, age : 255.//经测试,变量名加引号、单引号、不加引号,后台都能取到值6.//如果含有中文,必须用encodeURI()进行编码,然后再服务器端用decodeURI()解码即可,如7.// {name:encodeURI($("#uName").val()),"password":$("#uPassword").val()},8.}, //也可以用数组传值,{"attr []",["clf","25","male"]}9.function (){10. $("#div2").text("AJAX");11.}12.);[javascript]view plaincopyprint?1.$("div").load("wrongname.xml",function(response,status,xhr){2.if (status=="success")3. {4. $("div").html("<ol></ol>");5. $(response).find("artist").each(function(){6. <span style="white-space:pre"> </span>varitem_text = $(this).text();7. <span style="white-space:pre"> </span>$('<li></li>').html(item_text).appendTo('ol');8. <span style="white-space:pre"> </span> });9. }10.else11. {12. $("div").html("Anerror occured: <br/>" + xhr.status + " " + xhr.statusText)13. }14. });getJSON()方法getJSON(url,[data],[callback])callback格式为function(data,textStatus) { }data是一个返回的json对象[javascript]view plaincopyprint?1.$.getJSON("test.js",{ name: "John", time: "2pm" }, function(json){2. alert("JSON Data: " +ers[3].name);3.});getScript()方法getScript(url,[callback])callback格式为function(response,status)response - 包含来自请求的结果数据status - 包含请求的状态("success","notmodified", "error", "timeout" 或"parsererror")通过此函数注入的脚本会自动执行get()方法get(url,data,callback(response,status,xhr),dataType)dataType可能的类型:"xml"、"html" 、"text"、"script"、"json"、"jsonp"get() 方法通过远程HTTPGET 请求载入信息。
jquery table ajax reload的用法在现代的Web开发中,异步JavaScript和XML(AJAX)已经成为了一个不可或缺的部分,它允许我们在不重新加载整个页面的情况下,从服务器获取数据并更新页面的部分内容。
当与jQuery这样的JavaScript库结合使用时,AJAX的功能变得更加强大和易用。
在本文中,我们将详细讨论如何使用jQuery和AJAX来重新加载(reload)HTML表格的内容。
一、了解基础在开始之前,我们需要对jQuery和AJAX有一定的了解。
jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画和AJAX交互等Web开发常见任务。
AJAX则是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
二、为什么使用jQuery Table AJAX Reload在Web应用程序中,表格经常被用来展示数据。
当数据发生变化时,我们希望能够实时更新表格的内容,而不是重新加载整个页面。
这时,使用jQuery和AJAX来重新加载表格数据就变得非常有用。
它不仅可以提高用户体验,还可以减少服务器的负载。
三、基本用法假设我们有一个HTML表格,它的ID是“myTable”,并且我们有一个URL,该URL返回表格需要显示的数据。
下面是一个基本的例子,展示了如何使用jQuery和AJAX来重新加载这个表格的内容:$(document).ready(function() {// 定义一个函数来加载表格数据function loadTableData() {$.ajax({url:'your_data_url', // 数据URLtype:'GET', // 请求类型dataType:'json', // 预期服务器返回的数据类型success:function(data) {// 当请求成功时,这里会被执行// 假设data是一个包含表格数据的数组var tableBody =$("#myTable tbody"); // 获取表格的tbody元素tableBody.empty(); // 清空现有的表格内容// 遍历数据并创建表格行$.each(data, function(index, row) {var newRow =$("<tr><td>"+ row.column1+"</td><td>"+ row.column2+"</td></tr>"); tableBody.append(newRow); // 将新行添加到表格中});},error:function(jqXHR, textStatus, errorThrown) {// 当请求失败时,这里会被执行console.error("AJAX error: "+ textStatus +' - '+ errorThrown);}});}// 初始加载表格数据loadTableData();// 可以根据需要,例如定时器、按钮点击事件等,再次调用loadTableData函数来重新加载表格数据});四、进阶用法1. 使用模板引擎:当表格结构变得复杂时,手动拼接HTML字符串可能会变得非常繁琐且容易出错。
$.ajax使用方法$.ajax是jQuery中的一个方法,用于执行异步HTTP(Ajax)请求。
以下是$.ajax的基本使用方法:1.创建请求:```javascript$.ajax({url:"example.php",//请求的URL地址type:"GET",//请求方式,GET或POST dataType:"json",//预期服务器返回的数据类型,可以是xml、json、script、html等success:function(data){//请求成功后的回调函数console.log(data);//输出服务器返回的数据},error:function(){//请求失败时的回调函数console.log("请求失败");}});```2.发送数据:```javascript$.ajax({url:"example.php",type:"POST",data:{foo:"bar"},//要发送到服务器的数据,以键值对的形式表示dataType:"json",success:function(data){console.log(data);},error:function(){console.log("请求失败");}});```3.处理服务器响应:在成功回调函数中,服务器返回的数据作为参数传递给回调函数。
可以根据需要处理这些数据,例如更新页面内容或执行其他操作。
4.配置选项:$.ajax方法接受一个配置对象作为参数,其中包含以下选项:-`url`:请求的URL地址。
-`type`:请求方式,默认为"GET"。
-`dataType`:预期服务器返回的数据类型,默认为"html"。
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。
废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到).1. load( url, [data], [callback] ) :载入远程HTML 文件代码并插入至DOM 中。
url (String) : 请求的HTML页的URL地址。
data (Map) : (可选参数) 发送至服务器的key/value 数据。
callback (Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。
这个方法默认使用GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。
jQuery 1.2 中,可以指定选择符,来筛选载入的HTML 文档,DOM 中将仅插入筛选出的HTML 代码。
语法形如"url #some > selector"。
这个方法可以很方便的动态加载一些HTML文件,例如表单。
示例代码:$(".ajax.load").load("/yeer/archive/2009/06/10/ 1500682.html .post",function (responseText, textStatus, XMLHttpRequest){this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0]//alert(responseText);//请求返回的内容//alert(textStatus);//请求状态:success,error//alert(XMLHttpRequest);//XMLHttpRequest对象});这里将显示结果。
jquery中ajax请求的使⽤和四个步骤⽰例ajax() ⽅法⽤于执⾏ AJAX(异步 HTTP)请求,所有的 jQuery AJAX ⽅法都使⽤ ajax() ⽅法,该⽅法通常⽤于其他⽅法不能完成的请求。
基本的语法是:$.ajax({name:value, name:value, … })下⾯是通常使⽤的⽰例:$.ajax({type:'POST', // 规定请求的类型(GET 或 POST)url:uploadV, // 请求的url地址dataType:'json', //预期的服务器响应的数据类型data:{},//规定要发送到服务器的数据beforeSend:function(){ //发送请求前运⾏的函数(发送之前就会进⼊这个函数)// ....},success: function(result){ // 当请求成功时运⾏的函数//...},error:function(result){ //失败的函数//...},complete:function(){ //请求完成时运⾏的函数(在请求成功或失败之后均调⽤,即在 success 和 error 函数之后,不管成功还是失败都会进这个函数) // ...}});如果还需要其他参数,参考下⾯列举的⼀下其他的可以⽤到的名称和值:名称值/描述async布尔值,表⽰请求是否异步处理。
默认是 true。
beforeSend(xhr)发送请求前运⾏的函数。
cache布尔值,表⽰浏览器是否缓存被请求页⾯。
默认是 true。
complete(xhr,status)请求完成时运⾏的函数(在请求成功或失败之后均调⽤,即在 success 和 error 函数之后)。
contentType发送数据到服务器时所使⽤的内容类型。
默认是:”application/x-www-form-urlencoded”。
context为所有 AJAX 相关的回调函数规定 “this” 值。
ajax请求的例子Ajax(Asynchronous JavaScript and XML)是一种用于创建交互式网页应用的技术。
它通过在后台与服务器进行数据交换,实现页面的异步更新,避免了页面的重新加载,提高了用户体验。
下面将为大家介绍一些使用Ajax进行数据请求的例子。
例子一:获取用户信息假设我们有一个网页,需要获取用户的姓名和年龄。
我们可以使用Ajax发送请求,将用户信息发送给服务器,并在页面上显示出来。
以下是使用jQuery库实现的示例代码:```javascript$.ajax({url: "/user",type: "GET",dataType: "json",success: function(response) {var name = ;var age = response.age;$("#name").text(name);$("#age").text(age);}});例子二:搜索功能假设我们有一个搜索框,用户可以在其中输入关键词,并实时获取相关的搜索结果。
以下是一个使用Ajax实现的搜索功能的示例代码:```javascript$("#search-input").on("input", function() {var keyword = $(this).val();$.ajax({url: "/search",type: "GET",data: { keyword: keyword },dataType: "json",success: function(response) {var results = response.results;$("#search-results").empty();for (var i = 0; i < results.length; i++) {$("#search-results").append("<li>" + results[i] + "</li>");}}});});例子三:加载更多内容假设我们有一个新闻网站,页面上只显示了部分新闻内容,用户可以点击“加载更多”按钮来获取更多的新闻。
前言JSON采用完全独立于语言的文本格式,从而使得在JavaScript相关程序中处理JSON 格式的数据不需要应用任何特殊的API或软件工具包,这使得JSON成为理想的数据交换语言。
随着Web应用的普及及AJAX相关应用的深入,客户端和Web服务器端需要频繁地交互数据;同时随着移动设备的普及,客户端的访问设备也逐渐多样化。
如何使得同一Web 服务器能够响应不同的终端设备,并且都能够进行数据交互。
目前比较好的技术实现手段是应用JSon相关的技术。
作者根据自身多年的软件开发实践和经验总结,结合多年的IT职业培训的教学和高校软件学院一线的教学工作体验,在本系列文档中将从多个不同的方面和通过具体的程序代码示例为读者介绍JSon及相关的应用技术。
本文档主要涉及JSon的语法规则、JSon在AJAX 中的应用、JQuery对JSon的技术支持和应用JSonp协议实现跨域访问技术和应用示例。
欢迎读者下载相关的技术资料阅读和收藏,并提出良好的建议。
感兴趣的读者可以在百度文库页面中搜索“杨少波”,将能够搜索到杨教授工作室精心创作的优秀程序员职业提升必读系列技术资料。
这些资料将系统地从软件设计和开发实现的“设计思想”、“管理策略”、“技术实现”和“经验方法”等方面与读者进行充分的交流,也欢迎读者发表和交流自己对软件开发、课程设计、项目实训、技术学习的心得体会。
本文目录1.1JSON相关技术基础 (4)1.1.1JSON相关的技术基础 (4)1.1.2JSON对象表示的语法 (5)1.2JSON和JavaScript之间转换 (12)1.2.1将JSon格式的字符串转换为JavaScript对象 (12)1.2.2转换技术的应用示例 (16)1.3JSON系统包json.js (24)1.3.1JSON的官方网站 (24)1.3.2JSON 系统库中的stringify 函数 (25)1.3.3JSON 系统库中的parse函数 (28)1.4在AJAX中应用JSon实现客户/服务器之间交换数据 (31)1.4.1JSon格式的字符串特别适合于AJAX的数据传递 (31)1.4.2获得服务器端返回的JSON对象字符串 (32)1.4.3在客户端JS程序中向服务器端程序发送JSON对象字符串 (39)1.5JQuery和JSON相互配合应用AJAX技术 (46)1.5.1JQuery中与AJAX技术相关的几个函数 (46)1.5.2$.getScript()和$.getJSON()函数的各种调用形式示例 (49)1.5.3$.ajax()函数的各种调用形式示例 (52)1.6JavaScript中的跨域访问技术及示例 (55)1.6.1JSONP协议及相关实现技术 (55)1.6.2应用JQuery实现跨域访问示例 (59)1.6.3应用普通的JavaScript脚本实现跨域访问示例 (68)1.7JQuery和AJAX技术相互配合的应用示例 (70)1.7.1构建相关的JSP页面和JavaScript脚本代码 (70)1.7.2构建服务器端相关的Servlet程序 (74)1.7.3解决中文乱码的问题 (79)1.8动态加载页面数据的应用示例 (81)1.8.1构建相关的页面及JS脚本程序 (81)1.8.2测试相关的程序效果 (84)1.8.3用ajax函数读取和解析XML文件中数据的应用示例 (84)1.1JSON相关技术基础1.1.1JSON相关的技术基础1、JSON是什么JSON的全称JavaScript Object Notation,JavaScript对象表示法。
jqueryajax获取json并解析,获取的json是object对象格式⾸先我们使⽤的是ajax⽅式,推荐⼀个学习⽹址:这个博主写的特别好。
现在来看我们的例⼦:这⾥是没有参数的get⽅式:function tryapitest(){$.ajax({url:"/api/category/top/all",type:"get",dataType:"json",success: function(data) {console.log(data);},error: function(XMLHttpRequest, textStatus, errorThrown) {alert(XMLHttpRequest.status);alert(XMLHttpRequest.readyState);alert(textStatus);},})}控制台打印出的数据如下:可以看到,我们获取的data由三级组成:ststus,msg,data;那么接下来,我们需要获取data:Array(12)这个数据;因此在success函数⾥⾯添加如下:success: function(data) {//console.log(data);var item=data.data;console.log(item);}},此时查看console控制台的输出信息:可以看到此时已经获得Object的信息了,但是如果需要获取Object⾥⾯具体的属性,必须要将Object进⾏遍历:代码如下:success: function(data) {//console.log(data);var item=data.data;//console.log(item);for(var i=0;i<item.length;i++){console.log(item[i]);}},查看控制台的信息:此时就可以获取对应的数据和属性啦。
参数: optio ns返回值: xml HttpReq uest使用HTTP请求一个页面。
这是jque ry的低级ajax实现。
要查看高级抽象,见$.set、$.post等,这些方法更易于理解和使用。
但是功能上有限制(例如,没有错误处理函数)。
警告:如果数据类型指定为"scrip t",那么POST自动转化为GET方法。
(因为script会作为一个嵌入页面的script标签进行载入)$.ajax()函数返回它创建的XMLH ttpRequest对象。
在大部分情况下,你不需要直接操作此对象。
通常,这个XMLH ttpReq uest对象主要用于需要手动中断XMLH ttpRequest请求的时候。
注意:如果你指明了下面列出的数据类型,请确保服务端发送了正确的MIME响应类型(如. xml 的类型是"te xt/xml")。
错误的MIME类型能够导致脚本出现意想不到的问题。
请查看AJAX的范例来了解数据类型的更多信息。
$.ajax()函数需要一个参数,一个包含有键/值对的对象,用于初始化并操作请求对象。
在jQue ry 1.2版本中,如果你指明了一个JSONP回调函数,你就可以从其它的域中载入JSON类型的数据,写法类似于"myurl?callback=?" 。
jQuery会自动调用正确的方法名称来代替查询字符串,执行你指定的回调函数。
或者,你也可以指定jso np的数据类型的回调函数,此函数会自动添加到Ajax请求中。
参数选项:async(true) 数据类型: Boolean默认情况下,所有的请求都是异步发送的(默认为true)。
如果需要发送同步请求, 设置选项为false。
注意,同步请求可能会暂时的锁定浏览器, 当请求激活时不能进行任何操作。
beforeSe nd 数据类型: Functio n一个预处理函数用于在发送前修改XMLHttpReq uest对象,设置自定义头部等。
基于jQuery的AJAX和JSON的实例通过jQuery内置的AJAX功能,直接访问后台获得JSON格式的数据,然后通过jQuer把数据绑定到事先设计好的html模板上,直接在页面上显示。
我们先来看一下html模板:<table id="datas" border="1" cellspacing="0" style="border-collapse: collapse"><tr><th>订单ID</th><th>客户ID</th><th>雇员ID</th><th>订购日期</th><th>发货日期</th><th>货主名称</th><th>货主地址</th><th>货主城市</th><th>更多信息</th></tr><tr id="template"><td id="OrderID"></td><td id="CustomerID"></td><td id="EmployeeID"></td><td id="OrderDate"></td><td id="ShippedDate"></td><td id="ShippedName"></td><td id="ShippedAddress"></td><td id="ShippedCity"></td><td id="more"></td></tr></table>一定要注意的就是里面所有的id属性,这个是一个关键。
PHP jQuery Ajax Form 表单提交实例解析,包括创建一个表单 html 页面、添加 JQuery 代码、 jquery ajax 表单提交、 jquery ajax 表单验证、 反馈信息给用户, php ajax 表单验证,php ajax 提交表单,php ajax form 验证,php ajax 提交 form 。
本实例用到 JQuery 类库本身的函数和功能, 所有表单信息利用 PHPMailer 类库邮 件的形式发送。
1、创建一个表单 html 页面 表单部分 html 代码以下为引用内容: <div id="contact_form"> <form name="contact" method="post" action=""> <fieldset> <label for="name" id="name_label">姓名</label> <input type="text" name="name" id="name" size="30" value="" class="text-input" /> <label class="error" for="name" id="name_error">此项必填</label> <label for="email" id="email_label">您的 Email</label> <input type="text" name="email" id="email" size="30" value="" class="text-input" /> <label class="error" for="email" id="email_error">此项必填</label> <label for="phone" id="phone_label">您的联系电话</label> <input type="text" name="phone" id="phone" size="30" value="" class="text-input" /> <label class="error" for="phone" id="phone_error">此项必填</label> <br /> <input type="submit" name="submit" class="button" id="submit_btn" value=" 我要发送" /> </fieldset> </form> </div>这里用一个 id 为 contact_form 来包含整个包含信息;这是有意义的,稍后在 JavaScript 与用户交互信息的时候会用到,这里 form 标签的属性里面既包含了 method 和 action ;这个意义其实不大,因为 Javascript 直接操作 DOM ,所以没有 这两个属性也是可以的;务必要给用户输入的 input 标签加独立的 id ,这和第二点原理 类似。
JQuery中Ajax的操作完整例⼦Java软件开发中,后台中我们可以通过各种框架,像SSH等进⾏对代码的封装,⽅便我们对Java代码的编写,例如,Struts,SpringMVC对从前台到action的流程进⾏封装控制,使我们只需要进⾏⼀些简单配置就可以实现;⽽spring进⾏了对各种对象的管理进⾏封装,提供了AOP编程的⽅式,⼤⼤⽅便了我们;⽽hibernate和IBatis则是对JDBC代码进⾏封装,不需要我们每次都写那些重复⽽繁杂的JDBC代码。
前台呢,对于页⾯⼀些效果,验证等,我们都是通过JavaScript语⾔进⾏完成的,但是它也就像我们的Java代码⼀样,是最前台语⾔最基础的,⽽jQuery则是对js代码进⾏封装⽅便我们前台代码的编写,⽽且它还有⼀个⾮常⼤的优势就是解决了浏览器的兼容问题,这也是我们使⽤它⾮常重要的原因之⼀。
⽽现在为了满⾜⽤户的需求,Ajax(Asynchronous Javascript + XML)异步刷新起到了⽆可⽐拟的作⽤,以前写Ajax操作,总是需要我们想JDBC代码⼀样进⾏⼏个必备的步骤:AJAX——核⼼XMLHttpRequest对象,⽽JQuery也对Ajax异步操作进⾏了封装,这⾥看⼀下⼏种常⽤的⽅式。
$.ajax,$.post, $.get, $.getJSON。
⼀, $.ajax,这个是JQuery对ajax封装的最基础步,通过使⽤这个函数可以完成异步通讯的所有功能。
也就是说什么情况下我们都可以通过此⽅法进⾏异步刷新的操作。
但是它的参数较多,有的时候可能会⿇烦⼀些。
看⼀下常⽤的参数:var configObj = {method //数据的提交⽅式:get和posturl //数据的提交路劲async //是否⽀持异步刷新,默认是truedata //需要提交的数据dataType //服务器返回数据的类型,例如xml,String,Json等success //请求成功后的回调函数error //请求失败后的回调函数}$.ajax(configObj);//通过$.ajax函数进⾏调⽤。
jQuery Ajax应用解析jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。
我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()的(这个后面会说到).1. load( url, [data], [callback] ) :载入远程HTML 文件代码并插入至DOM 中。
url(String) : 请求的HTML页的URL地址。
data(Map) : (可选参数) 发送至服务器的key/value 数据。
callback(Callback) : (可选参数) 请求完成时(不需要是success的)的回调函数。
这个方法默认使用GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。
jQuery 1.2 中,可以指定选择符,来筛选载入的HTML 文档,DOM 中将仅插入筛选出的HTML 代码。
语法形如"url #some > selector"。
这个方法可以很方便的动态加载一些HTML文件,例如表单。
示例代码:$(".ajax.load").load("/QLeelulu/archive/2008/03/30/1130270.html .post", function (responseText, textStatus, XMLHttpRequest){this;//在这里this指向的是当前的DOM对象,即$(".ajax.load")[0]//alert(responseText);//请求返回的内容//alert(textStatus);//请求状态:success,error//alert(XMLHttpRequest);//XMLHttpRequest对象});这里将显示结果。
注:不知道为什么URL写绝对路径在FF下会出错,知道的麻烦告诉下。
下面的get()和post()示例使用的是绝对路径,所以在FF下你将会出错并不会看到返回结果。
还有get()和post()示例都是跨域调用的,发现传上来后没办法获取结果,所以把运行按钮去掉了。
2. jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求参数:url(String) : 发送请求的URL地址.data(Map) : (可选) 要发送给服务器的数据,以Key/value 的键值对形式表示,会做为QueryString附加到请求URL中。
callback(Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
这是一个简单的GET 请求功能以取代复杂$.ajax 。
请求成功时可调用回调函数。
如果需要在出错时执行函数,请使用$.ajax。
示例代码:$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){//返回的data 可以是xmlDoc, jsonObj, html, text, 等等.this; // 在这里this指向的是Ajax请求的选项配置信息,请参考下图alert(data);//alert(textStatus);//请求状态:success,error等等。
当然这里捕捉不到error,因为error的时候根本不会运行该回调函数//alert(this);});点击发送请求:jQuery.get()回调函数里面的this ,指向的是Ajax请求的选项配置信息:3. jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求参数:url(String) : 发送请求的URL地址.data(Map) : (可选) 要发送给服务器的数据,以Key/value 的键值对形式表示。
callback(Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
type (String) : (可选)官方的说明是:Type of data to be sent。
其实应该为客户端请求的类型(JSON,XML,等等)这是一个简单的POST 请求功能以取代复杂$.ajax 。
请求成功时可调用回调函数。
如果需要在出错时执行函数,请使用$.ajax。
示例代码:Ajax.aspx:Response.ContentType = "application/json";Response.Write("{result: '" + Request["Name"] + ",你好!(这消息来自服务器)'}");jQuery 代码:$.post("Ajax.aspx", { Action: "post", Name: "lulu" },function (data, textStatus){// data 可以是xmlDoc, jsonObj, html, text, 等等.//this; // 这个Ajax请求的选项配置信息,请参考jQuery.get()说到的thisalert(data.result);}, "json");点击提交:这里设置了请求的格式为"json":如果你设置了请求的格式为"json",此时你没有设置Response回来的ContentType 为:Response.ContentType = "application/json"; 那么你将无法捕捉到返回的数据。
注意一下,alert(data.result); 由于设置了Accept报头为“json”,这里返回的data就是一个对象,并不需要用eval()来转换为对象。
4. jQuery.getScript( url, [callback] ) : 通过GET 方式请求载入并执行一个JavaScript 文件。
参数url(String) : 待载入JS 文件地址。
callback(Function) : (可选) 成功载入后回调函数。
jQuery 1.2 版本之前,getScript 只能调用同域JS 文件。
1.2中,您可以跨域调用JavaScript 文件。
注意:Safari 2 或更早的版本不能在全局作用域中同步执行脚本。
如果通过getScript 加入脚本,请加入延时函数。
这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些示例代码:加载并执行test.js。
jQuery 代码:$.getScript("test.js");加载并执行AjaxEvent.js ,成功后显示信息。
jQuery 代码:$.getScript("AjaxEvent.js", function(){alert("AjaxEvent.js 加载完成并执行完成.你再点击上面的Get或Post按钮看看有什么不同?");});加载完后请重新点击一下上面的Load 请求看看有什么不同。
jQuery Ajax 事件Ajax请求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们的逻辑。
在jQuery这里有两种Ajax事件:局部事件和全局事件。
局部事件就是在每次的Ajax请求时在方法内定义的,例如:$.ajax({beforeSend: function(){// Handle the beforeSend event},complete: function(){// Handle the complete event}// ...});全局事件是每次的Ajax请求都会触发的,它会向DOM中的所有元素广播,在上面getScript() 示例中加载的脚本就是全局Ajax事件。
全局事件可以如下定义:$("#loading").bind("ajaxSend", function(){$(this).show();}).bind("ajaxComplete", function(){$(this).hide();});或者:$("#loading").ajaxStart(function(){$(this).show();});我们可以在特定的请求将全局事件禁用,只要设置下global 选项就可以了:$.ajax({url: "test.html",global: false,// 禁用全局Ajax事件.// ...});下面是jQuery官方给出的完整的Ajax事件列表:∙ajaxStart(Global Event)This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.∙beforeSend(Local Event)This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)∙ajaxSend(Global Event)This global event is also triggered before the request is run.∙success(Local Event)This event is only called if the request was successful (no errors from the server, no errors with the data).∙ajaxSuccess(Global Event)This event is also only called if the request was successful.∙error(Local Event)This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).∙ajaxError(Global Event)This global event behaves the same as the local error event.∙complete(Local Event)This event is called regardless of if the request was successful, or not. You will always receivea complete callback, even for synchronous requests.∙ajaxComplete(Global Event)This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.∙ajaxStop(Global Event)This global event is triggered if there are no more Ajax requests being processed.具体的全局事件请参考API文档。