html与js和php之间实现数据交互

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› PHP›PHP编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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