標籤：執行 驗證 前台 not blog url 示範 try images
對於網頁開發而言，網頁與伺服器之間的資料互動是很頻繁的，至關重要的一件事情。但是對於很多的初學者來說，這就成了一個不可逾越的痛點問題，本篇部落格將從一個初學者的關點講解其中一種互動方式，此方法經過本人驗證有效，並附有代碼。
首先要實現網頁前背景程式的互動需要安裝後台架構，本人安裝的架構為wamp（windows+apache+mysql+php）。安裝程式可以通過我在百度網盤上的分享連結下載http://pan.baidu.com/s/1cIKb8a 提取碼是cnfh。至於安裝過程中的配置可以參考http://wenku.baidu.com/link?url=eB_xVPpECufRgw2rrXptR_H8m8uT_PLa1818sX7oPXmbjDW36W-fYKtTHREv5NcANVjZfbcdtp2NWqqBt4dMVFtgL7sbMJOwoG-UydmT90_這裡 不再綴續。
架構安裝好之後就可以進行簡單的網頁開發了。
首先是一個簡單的用於測試的網頁代碼。
<html> <head> <script src="test.js"></script> //使用的test.js與此html代碼位於同一檔案路徑下，如果路徑不同需要使用相對路徑或絕對路徑 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <div> <button type="button" id="s" onclick = "test()">test</button>//建立一個按鈕用於向伺服器上傳資料
</div> <span id="processing"></span>//用於接收伺服器反饋回來的資料 </body></html>
接下來是text.js檔案
function test()//發送用戶端請求 { xmlHttp=GetXmlHttpObject();//擷取xmlhttp對象 if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="test.php"//伺服器幕後處理程式，此時需要和test.html檔案放到同一檔案夾下，如果不在同一檔案夾下，需要加相對路徑或者絕對路徑。 url=url+"?q="+1;//網頁發送給背景資料。可以是數字，字串，json格式資料等任意資料結構 url=url+"&sid="+Math.random()//添加一個隨機數作為尾碼，保證每次請求後台均會重新處理並相應。 xmlHttp.onreadystatechange=stateChanged//幕後處理程式回呼函數 xmlHttp.open("GET",url,true)//使用GET方式發送 xmlHttp.send(null)//發送資料 。}function stateChanged()//監測程式回呼函數{ if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")//如果xmlhttp對象成功接收到資料 { var strJson = xmlHttp.responseText;//獲得資料文本 //var state = new Function("return" + strJson)();//採用json格式解析 var state = eval("("+strJson+")");//和上述注釋函數功能相同，使用一個即可 document.getElementById("processing").innerHTML=state.openState;//顯示內容 } }function GetXmlHttpObject()//擷取xmlhttp對象{ var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp;}
最後是test.php檔案，需要注意的是，test.php檔案必須放到安裝好的wamp架構下才有效，例如我的架構安裝在E盤，則我的test.php檔案需要放到E:\AppServ\www\目錄下或者該目錄的子目錄 下才有效（之前被這個問題卡了好久，php檔案不執行導致 前端一直連不上後端），以下是php檔案代碼
<?php$hint = "";function test()//測試程式{ $json_string = file_get_contents(‘state.json‘);//開啟一個json檔案 $data = json_decode($json_string,true);//解析json檔案字串 if($data["openState"] == ‘close‘)//對json資料進行操作 { $data1 = array(); $data1[‘openState‘] = ‘open‘; $json_string1 = json_encode($data1); file_put_contents(‘state.json‘, $json_string1); } if($data["openState"] == ‘open‘)//對json資料進行操作 { $data1 = array(); $data1[‘openState‘] = ‘close‘; $json_string1 = json_encode($data1); file_put_contents(‘state.json‘, $json_string1); } return $json_string;//反饋資料}$q=$_GET["q"];//擷取前台傳來的資料本測試程式為1switch($q){case 1: $hint = test();//執行test函數 break;}$response=$hint;echo $response;//將處理完的資料反饋給前台?>
另外還需要php檔案中提及的state.json檔案，這個檔案在前後端互動 的時候不是必須的，此處僅僅是為了示範一個完整的json格式檔案讀寫識別操作過程，state.json檔案中只有一句代碼
{"openState":"close"}
以上代碼編寫完成後，就可以進行測試了,測試時需要注意的是開啟網頁的時候不能直接將html檔案拖入瀏覽器，而是需要使用localhost或者127.0.0.1來訪問html頁面，這樣才能與php進行互動，例如，我的檔案
檔案位於E:\AppServ\www檔案夾下
則我訪問test.html檔案的方式為在瀏覽器中輸入網址 http://localhost:8080/test.html
其中8080為連接埠號碼，是在安裝wamp架構時設定的，如果你採用的是其他連接埠號碼，請自行修改，另外，如果採用的是預設的連接埠號碼80，則可省略連接埠號碼。
成功運行時顯示的現象是
（注釋內容可自行刪除）
點擊test按鈕
顯示如下
可見從伺服器後端php指令碼中成功擷取到了資訊。再次點擊
原來的close變成了open，可見後台指令碼執行正常。
至此，一個簡單的網頁前後端非同步互動樣本介紹完畢。
你，學會了嗎？
網頁前後端互動樣本
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
