通过jquery执行ajax取出后台数据

最新推荐文章于 2022-11-21 15:16:28 发布

goodgirl1991

最新推荐文章于 2022-11-21 15:16:28 发布

阅读量2.1k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/goodgirl1991/article/details/50519334

版权

js 专栏收录该内容

73 篇文章 0 订阅

订阅专栏

本文部分内容引用自http://www.chinaz.com/web/2012/0320/240936.shtml

何为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的设置就更改完成了。我们再运行程序，就不会报错了

goodgirl1991

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
通过jquery执行ajax取出后台数据

本文部分内容引用自http://www.chinaz.com/web/2012/0320/240936.shtml何为ajax即异步javascript和xml的结合，其功能便是实现客户端（通常为浏览器）与服务器之间的数据交互，更新浏览器页面。那为什么要使用ajax，这就不得不提到ajax出现之前，我们用来进行数据交互的传统web方法了，使用传统web方法时，每当客户端像服务器提交一个请求
复制链接

扫一扫