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

 

2019-08-02 原生ajax搜索的更多相关文章

  1. 2019.08.02 云从科技C++后台开发

    公司坐标:重庆 岗位:C++后台开发 面试时长:45分钟 主要问题记录: (1)手写代码 冒泡算法的实现: /**   * 冒泡排序:C++   *   * @author skywang   * @ ...

  2. 【纪中集训】2019.08.02【NOIP提高组】模拟 A 组TJ

    \(\newcommand{\RNum}[1]{\uppercase\expandafter{\romannumeral #1\relax}}\) T1 一道可以暴力撵标算的题-- Descripti ...

  3. 原生Ajax

    使用原生Ajax 验证用户名是否被注册 创建出注册信息: <h1>注册信息</h1><input type="text" name="txt ...

  4. 浅谈AJAX的基本原理和原生AJAX的基础用法

    一.什么是AJAX? AJAX,即"Asynchronous Javascript And XML",翻译为异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技 ...

  5. 原生AJAX如何异步提交数据？

    AJAX概述 AJAX:Asynchronous Javascript And XML,异步的JS和XML.2001,Google为了改进搜索的用户体验,提出了GoogleSugguest效果,正式提 ...

  6. JS原生ajax

    原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe ...

  7. 原生ajax与封装的ajax使用方法

    当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...

  8. 原生ajax、XMLHttpRequest和FetchAPI简单描述

    什么是ajax ajax的出现,刚好解决了传统方法的缺陷.AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个 ...

  9. JS原生ajax与Jquery插件ajax深入学习

    序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...

随机推荐

  1. 安装Visual Studio 时窗口闪过就退出

    双击安装文件,窗口闪了下就退出了. 解决方法:控制面板 ———程序——程序和功能——打开或关闭Windows功能——关闭NET相关框架. 然后再次安装即可. 参考文献:   VS安装程序一闪而过

  2. FastDFS 分布式文件系统（部署和运维）

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/KamRoseLee/article/det ...

  3. JAVA并发-join

    概念 join方法,一种特殊的wait,当前运行线程调用另一个线程的join方法,当前线程进入阻塞状态直到调用join方法的线程结束,再继续执行. 一般情况下,都是主线程创建一个子线程,子线程调用jo ...

  4. POJ2536-Gopher II-（匈牙利算法）

    题意:n只老鼠,m个洞,s秒逃命,逃命速度为v,一个洞只能保住一只老鼠,最少多少只老鼠会被老鹰抓到. 题解:找出每只老鼠有哪些洞可以保命,建立二分图,算出最大匹配,不是求保住命的老鼠,而是求被抓住的老 ...

  5. Pandas | 11 字符串函数

    在本章中,我们将使用基本系列/索引来讨论字符串操作.在随后的章节中,将学习如何将这些字符串函数应用于数据帧(DataFrame). Pandas提供了一组字符串函数,可以方便地对字符串数据进行操作. ...

  6. AQS源码的简单理解

    概念 AQS全称 AbstractQueuedSynchronizer. AQS是一个并发包的基础组件,用来实现各种锁,各种同步组件的.它包含了state变量.加锁线程.等待队列等并发中的核心组件. ...

  7. Azure容器监控部署（上）

    前两篇简单的介绍了一下prometheus的,本节原本是写node_exporter和cAdvisor的搭建,但网上教程很多,所以直接写整套环境的部署过程 一.架构 我们原来的系统架构是在AZURE上 ...

  8. 依赖注入之unity（winform方式）

    依赖注入之unity(winform方式) 要讲unity就必须先了解DI和IOC及DIP,如下链接提供DI和IOC的基础:https://www.cnblogs.com/zlp520/p/12015 ...

  9. 【java】使用jsp命令查看系统中java运行的程序及进程号

    对于java独立运行的程序,他们在进程中的名字都是 Java(TM) Platform SE binary,如图 我们想知道这个进程运行的是哪个程序,怎么办呢? 答案是:可以在命令行下,运行:jps命 ...

  10. windows7 安装 docker-compose

    这篇博客,默认你已经安装了docker,下面介绍如何安装docker-compose 1.访问docker-compose的git地址 2.找到最新版的docker-compose 3.打开Docke ...