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

Posted 2021-01-23 Du.Du

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