2019-08-02 原生ajax搜索 

<html>
    <meta charset="utf-8"/>
    <head><title>搜索页</title></head>
    <body>
        <input type="text" id="user_data"/><button onclick="search()">百度一下</button>
        <div id="list"></div>

    </body>
</html>
<script type="text/javascript">
    function search(){
        //alert(1);
        var user_data = document.getElementById('user_data').value;//接收到文本框的值
        if (user_data=="")
        {
            document.getElementById('list').innerHTML="不可为空";
        }else{
        //alert(user_data);
        var xhr = new XMLHttpRequest();//引入原生ajax
        //console.log(xhr);
        xhr.open("post","search.php",true);
        
        xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');

        xhr.onreadystatechange = function(){
            //console.log(xhr.readyState);//打印监听状态
            //console.log(xhr.responseText);//值
            var cd =    xhr.responseText;
            var e = JSON.parse(cd);
            var str = "<table><th>id</th><th>name</th><th>email</th>";
            for(var i =0 in e){
                str+="<tr><td>"+e[i].id+"</td><td>"+e[i].name+"</td><td>"+e[i].email+"</td></tr>";
            }
            str+="</table>";
            document.getElementById("list").innerHTML=str;
        }
        xhr.send("data="+user_data);
    }
}

</script>

 

php代码：

<?php
    $data =  $_POST['data'];
    $dsn = "mysql:host=127.0.0.1;port=3306;charset=utf8;dbname=news";
    $pdo = new PDO($dsn,"root","root");
    $sql = "select * from news where name like '%$data%'";
    $res = $pdo->query($sql);
    $row = $res->fetchALL(PDO::FETCH_ASSOC);
    echo json_encode($row);
?>

 

使用get请求的总结 

1、创建ajax对象
2、给ajax状态的改变绑定监听的事件处理程序
3、建立一个http请求
4、发送一个http请求
 
在使用post方法时一定要设置请求头
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
 
 

 

 
posted @ 2019-08-02 17:13  筏愫  阅读(151)  评论(0)  编辑  收藏  举报