ajax向伺服器發送數據-php教程-PHP中文網

首頁

後端開發

php教程

ajax向伺服器發送數據

小云云

Jan 12, 2018 pm 01:40 PM

ajax 數據伺服器

本文主要介紹了Ajax 高級功能之ajax向伺服器發送資料的相關資料,需要的朋友可以參考下，希望能幫助到大家。

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">
<p class="lable">
<p class="row">
<p class="cell lable">Apples:</p>
<p class="cell"><input name="apples" value="5" /></p>
</p>
<p class="row">
<p class="cell lable">Bananas:</p>
<p class="cell"><input name="bananas" value="2" /></p>
</p>
<p class="row">
<p class="cell lable">Cherries:</p>
<p class="cell"><input name="cherries" value="20" /></p>
</p>
<p class="row">
<p class="cell lable">Total:</p>
<p id="results" class="cell">0 items</p>
</p>
</p>
<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(&#39;http&#39;);
var querystring = require(&#39;querystring&#39;);
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(&#39;<html><head><title>Fruit Total</title></head><body>&#39;);
res.write(&#39;<p>&#39;+total+&#39; item ordered</p></body></html>&#39;);
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 == &#39;/form&#39;&& req.method == &#39;POST&#39;){
var dataObj = new Object();
var contentType = req.headers["content-type"];
var fullBody = &#39;&#39;;
if(contentType){
if(contentType.indexOf("application/x-www-form-urlencode") > -1){
req.on(&#39;data&#39;,function(chunk){
fullBody += chunk.toString();
});
req.on(&#39;end&#39;,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(&#39;data&#39;,function(chunk){
fullBody += chunk.toString();
});
req.on(&#39;end&#39;,function(){
dataObj = JSON.parse(fullBody);
writeResponse(res,dataObj);
});
}
}
}
}).listen(8080);

登入後複製

腳本中高亮部分：writeResponse函數。這個函數會在提取請求的表單值之後調用，它負責生產對瀏覽器的回應。目前，這個函數會創建簡單的HTML文檔，效果如下：

這個響應很簡單，實現效果是讓伺服器計算了用戶透過form中各個input元素所訂購的水果總數。伺服器得端腳本的其餘部分負責解碼客戶端用Ajax發送的各種可能資料格式。

1.2 理解問題所在

上面的圖片清楚的描述了想要用Ajax解決的問題。

當提交表單後，瀏覽器會在新的頁面顯示結果。這意味著兩點：

* 使用者必須等待伺服器處理資料並產生回應；

* 所有文件上下文資訊都遺失了，因為結果是作為新文檔進行顯示的。

這就是應用Ajax的理想情形了。可以非同步產生請求，這樣使用者就能在表單被處理時繼續與文件互動。

2. 傳送表單

#向伺服器傳送資料的最基本方式是自行收集並格式化它。下面程式碼展示了新增到前面的HTML文件 example.html 的一段腳本。用的就是這種方式：

<!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">
<p class="lable">
<p class="row">
<p class="cell lable">Apples:</p>
<p class="cell"><input name="apples" value="5" /></p>
</p>
<p class="row">
<p class="cell lable">Bananas:</p>
<p class="cell"><input name="bananas" value="2" /></p>
</p>
<p class="row">
<p class="cell lable">Cherries:</p>
<p class="cell"><input name="cherries" value="20" /></p>
</p>
<p class="row">
<p class="cell lable">Total:</p>
<p id="results" class="cell">0 items</p>
</p>
</p>
<button id="submit" type="submit">Submit Form</button>
</form>
<script>
document.getElementById("submit").onclick = handleButtonPress;
var httpRequest;
function handleButtonPress(e){
//对表单里的button元素而言，其默认行为是用常规的非Ajax方式提交表单。这里不想让他发生，所以调用了preventDefault方法
e.preventDefault();
var form = document.getElementById("fruitform");
//收集并格式化各个input的值
var formData ="";
var inputElements = document.getElementsByTagName("input");
for (var i = 0; i < inputElements.length; i++){
formData += inputElements[i].name + "=" + inputElements[i].value +"&";
}
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = handleResponse;
//数据必须通过POST方法发送给服务器，并读取了HTMLFormElement的action属性获得了请求需要发送的URL
httpRequest.open("POST",form.action);
//添加标头来告诉服务器准备接受的数据格式
httpRequest.setRequestHeader(&#39;Content-Type&#39;,&#39;application/x-www-form-urlencoded&#39;);
//把想要发送给服务器的字符串作为参数传递给send方法
httpRequest.send(formData);
}
function handleResponse(){
if(httpRequest.readyState == 4 && httpRequest.status == 200){
document.getElementById("results").innerHTML = httpRequest.responseText;
}
}
</script>
</body>
</html>

登入後複製

效果圖如下：

伺服器回應表單提交後傳回的HTML文件會顯示在同一頁，而且該請求是非同步執行的。

3. 傳送JSON資料

#Ajax不只用來傳送表單數據，幾乎可以傳送任何數據，包括JavaScript物件表示法(JavaScript Object Notation,JSON)數據，而它幾乎已經成為一種流行的數據格式了。 Ajax紮根於XML，但這格式很繁瑣。當運行的網頁應用程式必須傳輸大量XML文件時，繁瑣就意味著頻寬和系統容量方面的實際成本。

JSON經常被稱為XML的「脫脂」替代品。 JSON易於閱讀和編寫，比XML更緊湊，而且已經獲得了廣泛支援。 JSON發源於JavaScript，但它的發展已經超越了 JavaScript，被無數的程式包和系統理解並使用。

以下是一個簡單的JavaScript物件用JSON表達的範例：

{"bananas":"2","apples":"5","cherries":"20"}

登入後複製

這個物件有三個屬性：bananas、apples和cherries。這些屬性的值分別是2、5和20。

JSON的功能不如XML豐富，但對許多應用程式來說，那些功能是用不到的。 JSON簡單、輕量和富有表現力。以下範例示範了傳送JSON資料到伺服器有多簡單，修改前例的JavaScript部分如下：

<script>
document.getElementById("submit").onclick = handleButtonPress;
var httpRequest;
function handleButtonPress(e){
e.preventDefault();
var form = document.getElementById("fruitform");
var formData = new Object();
var inputElements = document.getElementsByTagName("input");
for(var i=0;i<inputElements.length;i++){
formData[inputElements[i].name] = inputElements[i].value;
}
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = handleResponse;
httpRequest.open("POST",form.action);
httpRequest.setRequestHeader("Content-Type","application/json");
httpRequest.send(JSON.stringify(formData));
}
function handleResponse(){
if(httpRequest.readyState == 4 && httpRequest.status == 200){
document.getElementById("results").innerHTML = httpRequest.responseText;
}
}
</script>

登入後複製

這段腳本，建立了一個新的Object，並且定義了一些屬性來對應表單內各個input元素的name屬性值。可以使用任何數據，但 input元素很方便，而且能和先前的範例保持一致。

為了告訴伺服器正在發送JSON數據，把請求的Content-Type標頭設為application/json，就像這樣：

httpRequest.setRequestHeader("Content -Type","application/json");
用JSON物件和JSON格式進行相互的轉換。（大多數瀏覽器能直接支援這個對象，但也可以用下面的網址裡的腳本來為舊版的瀏覽器添加相同的功能：https://github.com/douglascrockford/JSON-js/blob/master/ json2.js ）JSON物件提供了兩個方法：

在上面的例子中，使用了stringify方法，然后把结果传递给XMLHttpRequest 对象的send方法。此例中只有数据的编码方式发生了变化。提交表单的效果还是一样。

4. 使用FormData对象发送表单数据

另一种更简洁的表单收集方式是使用一个FormData对象，它是在XMLHttpRequest的第二级规范中定义的。

由于原来的Node.js代码有点问题，此处用C#新建文件 fruitcalc.aspx作为处理请求的服务器。其cs代码如下：

using System;
namespace Web4Luka.Web.ajax.html5
{
public partial class fruitcalc : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
int total = 0;
if (Request.HttpMethod == "POST")
{
if (Request.ContentType.IndexOf("multipart/form-data") > -1)
{
for (int i = 0; i < Request.Form.Count; i++)
{
total += Int32.Parse(Request.Form[i]);
}
}
writeResponse(Response, total);
}
}
private void writeResponse(System.Web.HttpResponse Response, int total)
{
string strHtml;
Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:63342");
strHtml = total + " item ordered";
Response.Write(strHtml);
}
}
}

登入後複製

4.1 创建 FormData 对象

创建FormData对象时可以传递一个HTMLFormElement对象，这样表单里所有的元素的值都会被自动收集起来。示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用FormData对象</title>
<style>
.row{display: table-row;}
.cell{display: table-cell;padding: 5px;}
.lable{text-align: right;}
</style>
</head>
<body>
<form id="fruitform" method="post" action="http://localhost:53396/ajax/html5/fruitcalc.aspx">
<p class="lable">
<p class="row">
<p class="cell lable">Apples:</p>
<p class="cell"><input name="apples" value="5" /></p>
</p>
<p class="row">
<p class="cell lable">Bananas:</p>
<p class="cell"><input name="bananas" value="2" /></p>
</p>
<p class="row">
<p class="cell lable">Cherries:</p>
<p class="cell"><input name="cherries" value="20" /></p>
</p>
<p class="row">
<p class="cell lable">Total:</p>
<p id="results" class="cell">0 items</p>
</p>
</p>
<button id="submit" type="submit">Submit Form</button>
</form>
<script>
document.getElementById("submit").onclick = handleButtonPress;
var httpRequest;
function handleButtonPress(e){
e.preventDefault();
var form = document.getElementById("fruitform");
var formData = new FormData(form);
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = handleResponse;
httpRequest.open("POST",form.action);
httpRequest.send(formData);
}
function handleResponse(){
if(httpRequest.readyState == 4 && httpRequest.status == 200){
document.getElementById("results").innerHTML = httpRequest.responseText;
}
}
</script>
</body>
</html>

登入後複製

当然，关键的变化是使用了FormData对象：

var formData = new FormData(form);

登入後複製

其他需要注意的地方是不再设置Content-Type标头的值了。如果使用FormData对象，数据总是会被编码为multipart/form-data 。本例提交表单后，显示效果如下：

4.2 修改FormData对象

FormData对象定义了一个方法，它允许给要发送到服务器的数据添加名称/值对。

可以用append方法增补从表单中收集的数据，也可以在不使用HTMLFormElement的情况下创建FormData对象。这就意味着可以使用append方法来选择向客户端发送哪些数据值。修改上一示例的JavaScript代码如下：

<script>
document.getElementById("submit").onclick = handleButtonPress;
var httpRequest;
function handleButtonPress(e){
e.preventDefault();
var form = document.getElementById("fruitform");
var formData = new FormData();
var inputElements = document.getElementsByTagName("input");
for(var i=0;i<inputElements.length;i++){
if(inputElements[i].name != "cherries"){
formData.append(inputElements[i].name,inputElements[i].value);
}
}
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = handleResponse;
httpRequest.open("POST",form.action);
httpRequest.send(formData);
}
function handleResponse(){
if(httpRequest.readyState == 4 && httpRequest.status == 200){
document.getElementById("results").innerHTML = httpRequest.responseText;
}
}
</script>

登入後複製

此段脚本里，创建FormData对象时并没有提供HTMLFormElement对象。随后用DOM找到文档里所有的input元素，并为那些name属性的值不是cherries的元素添加名称/值对。此例提交表单后，显示效果如下：

5. 发送文件

可以使用FormData 对象和type 属性为 file 的input 元素向服务器发送文件。当表单提交时，FormData对象会自动确保用户选择的文件内容与其他的表单值一同上传。下面的例子展示了如何以这种方式使用FormData对象。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用FormData对象发送文件到服务器</title>
<style>
.row{display: table-row;}
.cell{display: table-cell;padding: 5px;}
.lable{text-align: right;}
</style>
</head>
<body>
<form id="fruitform" method="post" action="http://localhost:53396/ajax/html5/fruitcalc.aspx">
<p class="lable">
<p class="row">
<p class="cell lable">Apples:</p>
<p class="cell"><input name="apples" value="5" /></p>
</p>
<p class="row">
<p class="cell lable">Bananas:</p>
<p class="cell"><input name="bananas" value="2" /></p>
</p>
<p class="row">
<p class="cell lable">Cherries:</p>
<p class="cell"><input name="cherries" value="20" /></p>
</p>
<p class="row">
<p class="cell lable">File:</p>
<p class="cell"><input type="file" name="file" /></p>
</p>
<p class="row">
<p class="cell lable">Total:</p>
<p id="results" class="cell">0 items</p>
</p>
</p>
<button id="submit" type="submit">Submit Form</button>
</form>
<script>
document.getElementById("submit").onclick = handleButtonPress;
var httpRequest;
function handleButtonPress(e){
e.preventDefault();
var form = document.getElementById("fruitform");
var formData = new FormData(form);
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = handleResponse;
httpRequest.open("POST",form.action);
httpRequest.send(formData);
}
function handleResponse(){
if(httpRequest.readyState == 4 && httpRequest.status == 200){
document.getElementById("results").innerHTML = httpRequest.responseText;
}
}
</script>
</body>
</html>

登入後複製

此例里，最明显的变化发生在 form元素上。添加了input元素后，FormData对象就会上传用户所选的任意文件。

修改 fruitcalc.aspx 的cs文件如下：

using System;
using System.Web;
namespace Web4Luka.Web.ajax.html5
{
public partial class fruitcalc : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
int total = 0;
if (Request.HttpMethod == "POST")
{
if (Request.ContentType.IndexOf("multipart/form-data") > -1)
{
for (int i = 0; i < Request.Form.Count; i++)
{
total += Int32.Parse(Request.Form[i]);
}
if (Request.Files["file"] != null)
{
HttpPostedFile file = Request.Files["file"];
file.SaveAs(Server.MapPath("/upload/pictures/" + file.FileName));
}
}
writeResponse(Response, total);
}
}
private void writeResponse(System.Web.HttpResponse Response, int total)
{
string strHtml;
Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:63342");
strHtml = total + " item ordered";
Response.Write(strHtml);
}
}
}

登入後複製

此例的显示效果如下：

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1664

CakePHP 教程

1422

Laravel 教程

1316

PHP教程

1266

C# 教程

1239

Related knowledge

開源！超越ZoeDepth！ DepthFM：快速且精確的單目深度估計！ Apr 03, 2024 pm 12:04 PM

0.這篇文章乾了啥？提出了DepthFM：一個多功能且快速的最先進的生成式單目深度估計模型。除了傳統的深度估計任務外，DepthFM還展示了在深度修復等下游任務中的最先進能力。 DepthFM效率高，可以在少數推理步驟內合成深度圖。以下一起來閱讀這項工作~1.論文資訊標題：DepthFM:FastMonocularDepthEstimationwithFlowMatching作者：MingGui,JohannesS.Fischer,UlrichPrestel,PingchuanMa,Dmytr

使用ddrescue在Linux上恢復數據 Mar 20, 2024 pm 01:37 PM

DDREASE是一種用於從檔案或區塊裝置(如硬碟、SSD、RAM磁碟、CD、DVD和USB儲存裝置)復原資料的工具。它將資料從一個區塊設備複製到另一個區塊設備，留下損壞的資料區塊，只移動好的資料區塊。 ddreasue是一種強大的恢復工具，完全自動化，因為它在恢復操作期間不需要任何干擾。此外，由於有了ddasue地圖文件，它可以隨時停止和恢復。 DDREASE的其他主要功能如下：它不會覆寫恢復的數據，但會在迭代恢復的情況下填補空白。但是，如果指示工具明確執行此操作，則可以將其截斷。將資料從多個檔案或區塊還原到單

Google狂喜：JAX性能超越Pytorch、TensorFlow！或成GPU推理訓練最快選擇 Apr 01, 2024 pm 07:46 PM

谷歌力推的JAX在最近的基準測試中表現已經超過Pytorch和TensorFlow，7項指標排名第一。而且測試並不是JAX性能表現最好的TPU上完成的。雖然現在在開發者中，Pytorch依然比Tensorflow更受歡迎。但未來，也許有更多的大型模型會基於JAX平台進行訓練和運行。模型最近，Keras團隊為三個後端（TensorFlow、JAX、PyTorch）與原生PyTorch實作以及搭配TensorFlow的Keras2進行了基準測試。首先，他們為生成式和非生成式人工智慧任務選擇了一組主流

如何將Dnsmasq設定為DHCP中繼伺服器 Mar 21, 2024 am 08:50 AM

DHCP中繼的作用是將接收到的DHCP封包轉送到網路上的另一個DHCP伺服器，即使這兩台伺服器位於不同的子網路中。透過使用DHCP中繼，您可以實現在網路中心部署集中式的DHCP伺服器，並利用它為所有網路子網路/VLAN動態分配IP位址。 Dnsmasq是一種常用的DNS和DHCP協定伺服器，可設定為DHCP中繼伺服器，以協助管理網路中的動態主機設定。在本文中，我們將向您展示如何將dnsmasq配置為DHCP中繼伺服器。內容主題：網路拓樸在DHCP中繼上設定靜態IP位址集中式DHCP伺服器上的D

iPhone上的蜂窩數據網路速度慢：修復 May 03, 2024 pm 09:01 PM

在iPhone上面臨滯後，緩慢的行動數據連線？通常，手機上蜂窩互聯網的強度取決於幾個因素，例如區域、蜂窩網絡類型、漫遊類型等。您可以採取一些措施來獲得更快、更可靠的蜂窩網路連線。修復1–強制重啟iPhone有時，強制重啟設備只會重置許多內容，包括蜂窩網路連線。步驟1–只需按一次音量調高鍵並放開即可。接下來，按降低音量鍵並再次釋放它。步驟2–過程的下一部分是按住右側的按鈕。讓iPhone完成重啟。啟用蜂窩數據並檢查網路速度。再次檢查修復2–更改資料模式雖然5G提供了更好的網路速度，但在訊號較弱

特斯拉機器人進廠打工，馬斯克：手的自由度今年將達到22個！ May 06, 2024 pm 04:13 PM

特斯拉機器人Optimus最新影片出爐，已經可以在工廠裡打工了。正常速度下，它分揀電池（特斯拉的4680電池）是這樣的：官方還放出了20倍速下的樣子——在小小的「工位」上，揀啊揀啊揀：這次放出的影片亮點之一在於Optimus在廠子裡完成這項工作，是完全自主的，全程沒有人為的干預。而且在Optimus的視角之下，它還可以把放歪了的電池重新撿起來放置，主打一個自動糾錯：對於Optimus的手，英偉達科學家JimFan給出了高度的評價：Optimus的手是全球五指機器人裡最靈巧的之一。它的手不僅有觸覺

阿里7B多模態文件理解大模型拿下新SOTA Apr 02, 2024 am 11:31 AM

多模態文件理解能力新SOTA！阿里mPLUG團隊發布最新開源工作mPLUG-DocOwl1.5，針對高解析度圖片文字辨識、通用文件結構理解、指令遵循、外部知識引入四大挑戰，提出了一系列解決方案。話不多說，先來看效果。複雜結構的圖表一鍵識別轉換為Markdown格式：不同樣式的圖表都可以：更細節的文字識別和定位也能輕鬆搞定：還能對文檔理解給出詳細解釋：要知道，“文檔理解”目前是大語言模型實現落地的一個重要場景，市面上有許多輔助文檔閱讀的產品，有的主要透過OCR系統進行文字識別，配合LLM進行文字理