International - English

Cart Console

Topic Center

Contact Sales

首頁 > 開發者 > Ajax

Jquery通過ajax請求NodeJS返回json資料執行個體_jquery

最後更新：2017-01-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

最近看了NodeJS相關的，在網上查了下結合AJAX的應用，感覺應用前景還是不錯的。為什麼用這個組合呢？

1.NodeJS不需要安裝，拷貝過去就可以使用，而環境變數可以只配置在當前cmd視窗，運行方便。

2.通過HTML的ajax請求，可以實現在不同的伺服器上，可跨域擷取資料。

3.通訊資料格式靈活，可以是xml、json、binary等，資料適合任何平台。

在說說我的環境，我使用的是公司提供的電腦，有很多限制，比如是域中電腦，操作許可權低，無法安裝任何軟體，無法修改電腦配置，無法使用隨身碟等等。所以我就自己配置了一個nodejs的綠色版環境，只能在當前cmd視窗運行nodejs的相關環境；無法架設html伺服器，所以就單獨在D盤建立一個html檔案雙擊開啟使用。

一、node環境就不說了，可以查看以下幾篇文章

http://www.jb51.net/article/33086.htm

http://www.jb51.net/article/54678.htm

http://www.jb51.net/article/57687.htm

二、編寫node執行的指令碼，指令檔app.js如下：

var http = require("http");var fs = require("fs");var str='{"id":"123",name:"jack",arg:11111}';function onRequest(request, response){ console.log("Request received."); response.writeHead(200,{"Content-Type":'text/plain','charset':'utf-8','Access-Control-Allow-Origin':'*','Access-Control-Allow-Methods':'PUT,POST,GET,DELETE,OPTIONS'});//可以解決跨域的請求 //response.writeHead(200,{"Content-Type":'application/json',   'Access-Control-Allow-Origin':'*','Access-Control-Allow-Methods':'PUT,POST,GET,DELETE,OPTIONS'}); //response.write("Hello World 8888\n");  str=fs.readFileSync('data.txt'); response.write(str); response.end();}http.createServer(onRequest).listen(8888);console.log("Server has started.port on 8888\n");console.log("test data: "+str.toString());

其中data.txt和當前app.js檔案的放到相同的目錄下，data.txt中代碼是json格式的資料：{"id":"123",name:"jack",arg:321,remark:"test data"}

通過node app.js的方式運行起來，然後就可以讓html通過ajax訪問資料了。

另外就是我建立的html檔案，檔案aaa.html內容如下：

<!DOCTYPE html><html><head> <title>Node JS 執行個體</title><script src="jquery-1.4.4.min.js"></script><script>/*//可用於檢查出錯函數的錯誤內容，一般使用$.get()和$.post()函數就可以了$.ajax({ url: "http://127.0.0.1:8888/", type: "GET", dataType: "binary", //因為是調用nodeJS返回的json資料，所以必須使用binary類型 error: function(XMLHttpRequest, textStatus, errorThrown){ var s1=XMLHttpRequest; var s2=textStatus; var s3=errorThrown; alert("error message : "+errorThrown.toString()) }, success: function(data){ $("#feeds").html(data); var dataObj=eval('('+data+')');//轉換為json對象 $("#id").html("編號："+dataObj.id); $("#name").html("姓名："+dataObj.name); $("#arg").html("年齡："+dataObj.arg); $("span").html(dataObj.remark); // alert( "Data is : " + data ); } }); *///$.get("test.cgi", function(data){ alert("Data Loaded: " + data); }); //$.get函數形式結構$.get("http://127.0.0.1:8888/" + new Date().getTime(), function(data){ $("#feeds").html(data);var dataObj=eval('('+data+')');//轉換為json對象$("#id").html("編號："+dataObj.id);$("#name").html("姓名："+dataObj.name);$("#arg").html("年齡："+dataObj.arg);$("span").html(dataObj.remark);//alert("Data Loaded: "+new Date().getTime()); });</script></head><body>  <div id="feeds"></div> <div id=id></div> <div id=name></div> <div id=arg></div>  <span>ddddd</span></body></html>

檔案中都做了相應的注釋說明，這裡就不再解釋了，其中用到的jquery的js檔案自己去網上下載一個，也同樣放到當前html檔案的目錄下。

有一點說明下：我下載了jquery的1.8.3版和2.1.4版都會報錯，可能對json的支援不是很好，使用1.4.4版可正常運行，其他版本沒有測試。

在我本機和內網測試正常顯示如下：

{"id":"123",name:"jack",arg:32100, remark:"test data"}
編號：123
姓名：jack
年齡：32100
test data

以上環境都是本人親自測試，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：

ajax入門指南（二） 02-28

ajax使用_雜類 08-22

jQuery ajax 檔案下載_ajax 08-22

AJAX各種實現方式比較_ajax 08-23

AJAX入門--- XMLHttpRequest對象的屬性和方法 08-23

解決spring-security session逾時 Ajax 請求沒有重新導向的問題 09-06

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Jquery通過ajax請求NodeJS返回json資料執行個體_jquery

聯繫我們

熱門內容

熱門主題

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support