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('服务器出错'); }, }); }