2019-08-02 原生ajax搜索

发布时间：2020-12-16 02:46:29 所属栏目：百科来源：网络整理

导读：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(){ // al

<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","sou.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‘);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!