網頁前后端交互示例

本文轉載自查看原文 2016-12-08 23:25 13653

對於網頁開發而言，網頁與服務器之間的數據交互是很頻繁的，至關重要的一件事情。但是對於很多的初學者來說，這就成了一個不可逾越的難點問題，本篇博客將從一個初學者的關點講解其中一種交互方式，此方法經過本人驗證有效，並附有代碼。

首先要實現網頁前后台程序的交互需要安裝后台框架，本人安裝的框架為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"];//獲取前台傳來的數據本測試程序為1

switch($q)
{
case 1:
    $hint = test();//執行test函數
    break;
}


$response=$hint;
echo $response;//將處理完的數據反饋給前台

?>