2019-08-02 原生ajax搜索

最新推荐文章于 2024-06-16 18:29:03 发布

ayucfqwua07405842

最新推荐文章于 2024-06-16 18:29:03 发布

阅读量52

点赞数

文章标签： php 数据库 javascript ViewUI

原文链接：http://www.cnblogs.com/zhangxu-fasu/p/11289898.html

版权

<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');

转载于:https://www.cnblogs.com/zhangxu-fasu/p/11289898.html

ayucfqwua07405842

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2019-08-02 原生ajax搜索

<html> <meta charset="utf-8"/> <head><title>搜索页</title></head> <body> <input type="text" id="user_data"/><button oncli...
复制链接

扫一扫