1. 準備向服務器發送數據
Ajax 最常見的一大用途是向服務器發送數據。最典型的情況是從 客戶端發送表單數據，即用戶在form元素所含的各個 input 元素里輸入的值。下面代碼展示了一張簡單的表單：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>基本表單</title><style>.table{display: table;}.row{display: table-row;}.cell{display: table-cell;padding: 5px;}.lable{text-align: right;}</style></head><body><form id="fruitform" method="post" action="http://127.0.0.1:8080/form"><div class="lable"><div class="row"><div class="cell lable">Apples:</div><div class="cell"><input name="apples" value="5" /></div></div><div class="row"><div class="cell lable">Bananas:</div><div class="cell"><input name="bananas" value="2" /></div></div><div class="row"><div class="cell lable">Cherries:</div><div class="cell"><input name="cherries" value="20" /></div></div><div class="row"><div class="cell lable">Total:</div><div id="results" class="cell">0 items</div></div></div><button id="submit" type="submit">Submit Form</button></form></body></html>這個例子中的表單包含三個input元素和一個提交button 。這些input元素讓用戶可以指定三種不同的說過各自要訂購多少，button則會將表單提交給服務器。
1.1 定義服務器
顯而易見，這里需要為這些示例創建處理請求的服務器。這里再一次使用Node.js，原因主要是它很簡單，而且用的是Javascript。新建 fruitcalc.js腳本文件如下：
var http = require('http');var querystring = require('querystring');function writeResponse(res,data){var total = 0;for(fruit in data){total += Number(data[fruit]);}res.writeHead(200,"OK",{"Content-Type":"text/html","Access-Control-Allow-Origin":"http://localhost:63342"});res.write('<html><head><title>Fruit Total</title></head><body>');res.write('<p>'+total+' item ordered</p></body></html>');res.end();}http.createServer(function(req,res){console.log("[200] "+req.method+" to "+req.url);if(req.method == "OPTIONS"){res.writeHead(200,"OK",{"Access-Control-Allow-Header":"Content-Type","Access-Control-Allow-Methods":"*","Access-Control-Allow-Origin":"*"});res.end();}else if(req.url == '/form'&& req.method == 'POST'){var dataObj = new Object();var contentType = req.headers["content-type"];var fullBody = '';if(contentType){if(contentType.indexOf("application/x-www-form-urlencode") > -1){req.on('data',function(chunk){fullBody += chunk.toString();});req.on('end',function(){var dBody = querystring.parse(fullBody);dataObj.apples = dBody["apples"];dataObj.bananas = dBody["bananas"];dataObj.cherries = dBody["cherries"];writeResponse(res,dataObj);});}else if(contentType.indexOf("application/json") > -1){req.on('data',function(chunk){fullBody += chunk.toString();});req.on('end',function(){dataObj = JSON.parse(fullBody);writeResponse(res,dataObj);});}}}}).listen(8080);
新聞熱點
疑難解答
圖片精選
