通过jquery执行ajax取出后台数据
2016-01-14 18:16
621 查看
本文部分内容引用自http://www.chinaz.com/web/2012/0320/240936.shtml
而使用ajax像服务器发送请求时,则不会如此。
一方面,AJAX的请求往往在后台发生,用户在阅读网页的时候,javascript代码可以继续在后台工作。这个过程对于用户来说是不可见的。并且不会打扰用户目前浏览的页面内容。
另一方面,浏览器对于页面的更新不再是更新所有内容,用一整个页面来替换原页面,而是哪里做出了改动,就更新哪里。
$.get()方法的基本语句形式:$.get(“url”,data,callback,type)
url:必写 url是服务器端的一个地址,可以是服务器端脚本或者是一个静态页面
data:选写 若需要在发送请求的同时传递一些参数给服务器,则使用data来表示所传参数。
callback:选写 为回调函数,说明了发送请求成功后,所要执行的操作
type:选写 说明了服务器所返回数据的类型,包括四种类型,分别为xml、json、script以及html,若不写,则jquery会尽力自己判断返回数据格式,并正确解析。
举一个例子,现在我们创建了一个文本文件:
{ "site": "***.com", "date":"2011/06/06", "tag": "jQuery","pages": 800 }
该文件模拟了一个JSON相应的结果。
html代码如下:
代码说明:
1.首先我们这里包含了一个show info的按钮,点击这个按钮触发click事件
2.代码最上面我们加载jQuery的最新类库,然后当页面加载完毕后,即DOM is ready后等待运行,这里我们没有使用 “$(document).ready(function(){” , 而是直接使用 “$( function() {”,这两种方式在jQuery是等同的。当然,使用前一种代码更容易阅读,后面一种方式比较简洁。
3.我们使用click方法来绑定一个点击方法到show info按钮。如果你点击这个按钮,将会触发一个AJAX请求到siteinfo.txt,并且我们向这个url传递了俩个参数,当然,对于这个例子来说 传递url参数没有意义,如果你指向一个后台url,它需要处理你的参数,再返回结果。然后,这里有个success()的回调函数,它在AJAX请求完 毕后运行,最后我们指定使用的数据格式是JSON
4.success()方法将调用由jQuery处返回的JSON对象,并且组装最后的显示内容。
注意:当我们在chrome运行我们的程序时很有可能提示:Cross origin requests are only supported for protocol schemes,不要惊慌,并非你的程序编写错误,而是“Chrome因為安全性的緣故,禁止檔案互相存取”,我们只需要对chrome浏览器进行一定的设置即可:
找到桌面上Chrome的捷徑圖示,按右鍵選擇內容,依下面畫面把參數加到最後面,記得在參數前面要多加一個空白。
完成後,開啟Google Chrome瀏覽器,在網址列上輸入chrome://version/來檢查是否有成功。
这样chrome的设置就更改完成了。我们再运行程序,就不会报错了
何为ajax
即异步javascript和xml的结合,其功能便是实现客户端(通常为浏览器)与服务器之间的数据交互,更新浏览器页面。那为什么要使用ajax,这就不得不提到ajax出现之前,我们用来进行数据交互的传统web方法了,使用传统web方法时,每当客户端像服务器提交一个请求时,服务器总是会以整个页面作为请求结果作为相应,然后浏览器负责显示页面内容,替换开始的页面。这个过程可能非常的耗时间,往往会让用户花很多时间来等待页面加载。而使用ajax像服务器发送请求时,则不会如此。
一方面,AJAX的请求往往在后台发生,用户在阅读网页的时候,javascript代码可以继续在后台工作。这个过程对于用户来说是不可见的。并且不会打扰用户目前浏览的页面内容。
另一方面,浏览器对于页面的更新不再是更新所有内容,用一整个页面来替换原页面,而是哪里做出了改动,就更新哪里。
通过jQuery执行ajax
以$.get()为例介绍。该方法用于客户端向浏览器发送请求。$.get()方法的基本语句形式:$.get(“url”,data,callback,type)
url:必写 url是服务器端的一个地址,可以是服务器端脚本或者是一个静态页面
data:选写 若需要在发送请求的同时传递一些参数给服务器,则使用data来表示所传参数。
callback:选写 为回调函数,说明了发送请求成功后,所要执行的操作
type:选写 说明了服务器所返回数据的类型,包括四种类型,分别为xml、json、script以及html,若不写,则jquery会尽力自己判断返回数据格式,并正确解析。
举一个例子,现在我们创建了一个文本文件:
{ "site": "***.com", "date":"2011/06/06", "tag": "jQuery","pages": 800 }
该文件模拟了一个JSON相应的结果。
html代码如下:
<!doctype html> <html lang="en"> <head> <title>Site Info Demo for jQuery $.get()</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style> #container{ padding: 100px; font-size: 12px; font-family: arial; } #result{ padding: 10px 0; } #result li{ padding: 10px 0; } </style> <script src="jquery-1.10.2.js"></script> <script> $( function() { $('#showinfo').click( function() { var data = { site: "GBin1.com", date: "20120318" }; $.get( "test.txt", data, success, "json" ); } ); function success( siteData ) { var result = "<li>Site Name:" + siteData.site + "</li>"; result += "<li>Creation Date:" + siteData.date + "</li>"; result += "<li>Site tag: " + siteData.tag + "</li>"; result += "<li>Site pages: " + siteData.pages + "</li>"; $("#result").html(result); } } ); </script> </head> <body> <div id="container"> <button id="showinfo">show info</button> <ul id="result"></ul> </body> </div> </html>
代码说明:
1.首先我们这里包含了一个show info的按钮,点击这个按钮触发click事件
2.代码最上面我们加载jQuery的最新类库,然后当页面加载完毕后,即DOM is ready后等待运行,这里我们没有使用 “$(document).ready(function(){” , 而是直接使用 “$( function() {”,这两种方式在jQuery是等同的。当然,使用前一种代码更容易阅读,后面一种方式比较简洁。
3.我们使用click方法来绑定一个点击方法到show info按钮。如果你点击这个按钮,将会触发一个AJAX请求到siteinfo.txt,并且我们向这个url传递了俩个参数,当然,对于这个例子来说 传递url参数没有意义,如果你指向一个后台url,它需要处理你的参数,再返回结果。然后,这里有个success()的回调函数,它在AJAX请求完 毕后运行,最后我们指定使用的数据格式是JSON
4.success()方法将调用由jQuery处返回的JSON对象,并且组装最后的显示内容。
注意:当我们在chrome运行我们的程序时很有可能提示:Cross origin requests are only supported for protocol schemes,不要惊慌,并非你的程序编写错误,而是“Chrome因為安全性的緣故,禁止檔案互相存取”,我们只需要对chrome浏览器进行一定的设置即可:
找到桌面上Chrome的捷徑圖示,按右鍵選擇內容,依下面畫面把參數加到最後面,記得在參數前面要多加一個空白。
完成後,開啟Google Chrome瀏覽器,在網址列上輸入chrome://version/來檢查是否有成功。
这样chrome的设置就更改完成了。我们再运行程序,就不会报错了
相关文章推荐
- 原生js实现 常见的jquery的功能
- [JQuery]往textarea中光标所在位置插入文本
- 转载JQuery绑定鼠标粘贴事件工具类
- jquery empty()方法在IE下报错的解决办法
- 获取和设置select的选中项的值
- Jquery常用表单元素操作总结
- 什么是jQuery
- jquery通过name,id,class取值或赋值
- Jquery实现列表项的快速检索
- jQuery中attr()和prop()在修改checked属性时的区别
- JQuery事件处理
- jQuery-实现图片的放大镜显示效果
- 轻松实现jquery手风琴效果
- jQuery取得iframe中元素的常用方法详解
- jquery ajax 使用layer的超时提示
- jquery对象和javascript对象即DOM对象相互转换
- jquery ajax无刷新页面上传
- jQuery 父iframe与子iframe 相互调用传值
- jquery.cxSelect插件,城市没单位
- [转]JQuery Ajax 在asp.net中使用总结