html與js和php之間實現數據交互

<div class="top3">
                <input id="KeyWord" type="text" class="form1" name="keyWord" value="請輸入關鍵字" onfocus="javascript:if(this.value=='請輸入關鍵字')this.value='';">
                <input type="button" class="form2" name="submit" onClick="getData()" value="Search">
</div>

<div id="divPicture"></div>

獲得輸入框的值 賦值給變量key：

var key = document.getElementById('KeyWord').value.trim();

再通過ourGet.js里面的下面這句代碼：

url:"search.php?keyWord="+key

把輸入的關鍵字傳遞給PHP代碼的：

$keyWord = $_GET['keyWord']

當然，要實現把關鍵字傳遞給PHP並提交到服務器，是在我們點擊了Search按鈕之后的。 
我在Search按鈕處給它寫了個點擊事件，每次我點擊，就調用ourGet.js里面的getData()函數

onClick="getData()"

function getData(){ var key = document.getElementById('ourKeyWord').value.trim(); $.ajax({ url:"search.php?keyWord="+key, //data是成功返回的json串
        success:function(data,status){ $('#divPicture').html("");//清空上一個div
            var obj = eval( '(' + data + ')' );//把json串解析成json對象
            var len = obj.length; for(var i=0;i<len;i++){ var img = document.createElement("img");//創建一個img對象
                img.src = obj[i]; var div = document.getElementById("divPicture"); div.appendChild(img); } }, error:function(data,status){ alert('失敗'); } }); //alert('nihao');
}

 

　　switch($action) {
        case 'init_data_list':
            init_data_list();
            break;
        case 'add_row':
            add_row();
            break;
        case 'del_row':
            del_row();
            break;
        case 'edit_row':
            edit_row();
            break;
    }

 //查詢方法
    function init_data_list(){
        //測試 運行crud.html時是否可以獲取到 下面這個字符串
        /*echo "46545465465456465";*/
        
        //查詢表
        $sql = "SELECT * FROM `t_users`";
        $query = query_sql($sql);
        while($row = $query->fetch_assoc()){
            $data[] = $row;
        }
        
        $json = json_encode(array(
            "resultCode"=>200,
            "message"=>"查詢成功！",
            "data"=>$data
        ),JSON_UNESCAPED_UNICODE);
        
        //轉換成字符串JSON
        echo($json);
    }

 

 　　　　　　function searchData() { var search_url = "./php/data.php"; //url 中問號后面的參數 action，這個對象就是查詢的參數
                var dataParam = { action: "init_data_list" }; $.ajax({ type: "get", url: search_url, data: dataParam, dataType: 'json', contentType: 'application/json; charset=utf-8', success: function(data) { //測試是否可以拿到php中的數據
 console.log(data); //遍歷這個數組
                        if(data.resultCode == 200) { var itemArr = data.data; for(var i = 0; i < itemArr.length; i++) { var item = itemArr[i]; console.log(item); } } }, error: function(data) { alert('服務器出錯'); }, }); }