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