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请求的总结
2019-08-02 原生ajax搜索的更多相关文章
- 2019.08.02 云从科技C++后台开发
公司坐标:重庆 岗位:C++后台开发 面试时长:45分钟 主要问题记录: (1)手写代码 冒泡算法的实现: /** * 冒泡排序:C++ * * @author skywang * @ ...
- 【纪中集训】2019.08.02【NOIP提高组】模拟 A 组TJ
\(\newcommand{\RNum}[1]{\uppercase\expandafter{\romannumeral #1\relax}}\) T1 一道可以暴力撵标算的题-- Descripti ...
- 原生Ajax
使用原生Ajax 验证用户名是否被注册 创建出注册信息: <h1>注册信息</h1><input type="text" name="txt ...
- 浅谈AJAX的基本原理和原生AJAX的基础用法
一.什么是AJAX? AJAX,即"Asynchronous Javascript And XML",翻译为异步的JavaScript和XML,是一种创建交互式网页应用的网页开发技 ...
- 原生AJAX如何异步提交数据？
AJAX概述 AJAX:Asynchronous Javascript And XML,异步的JS和XML.2001,Google为了改进搜索的用户体验,提出了GoogleSugguest效果,正式提 ...
- JS原生ajax
原文链接:http://caibaojian.com/ajax-jsonp.html 一.JS原生ajax ajax:一种请求数据的方式,不需要刷新整个页面: ajax的技术核心是 XMLHttpRe ...
- 原生ajax与封装的ajax使用方法
当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...
- 原生ajax、XMLHttpRequest和FetchAPI简单描述
什么是ajax ajax的出现,刚好解决了传统方法的缺陷.AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个 ...
- JS原生ajax与Jquery插件ajax深入学习
序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
随机推荐
- vue - 基础(2)
<div id="content"> {{ msg }} <div v-text="msg"></div> <div ...
- node-gyp 在此解决方案中一次生成一个项目。若要启用并行生成，请添加“/m”开关。
在此解决方案中一次生成一个项目.若要启用并行生成,请添加“/m”开关. MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”.要解决此问题, ...
- nginx访问限制
nginx的访问控制 1.http_access_module 基于ip的访问控制 允许的访问配置 不允许的访问配置 server { listen 80; server_name localho ...
- swagger 配置- ssm
swagger 配置 - ssm swagger 是一个用来看接口的工具,具体效果如下,这里用的是swagger2 1.porm.xml <dependency> <groupId& ...
- 操作excel文件爬取nvd.nist数据
#!/usr/bin/env python # encoding: utf-8 #@author: jack import random from time import sleep import p ...
- 【主席树启发式合并】【P3302】[SDOI2013]森林
Description 给定一个 \(n\) 个节点的森林,有 \(Q\) 次操作,每次要么将森林中某两点联通,保证操作后还是个森林,要么查询两点间权值第 \(k\) 小,保证两点联通.强制在线. L ...
- docker：轻量级图形页面管理工具Portainer
1.介绍 docker 图形化管理提供了很多工具,有Portainer.Docker UI.Shipyard等等,本文主要介绍Portainer. Portainer是一个开源.轻量级Docker管理 ...
- Spring Security教程(四)
在前面三个博客的例子中,登陆页面都是用的Spring Security自己提供的,这明显不符合实际开发场景,同时也没有退出和注销按钮,因此在每次测试的时候都要通过关闭浏览器来注销达到清除session ...
- 【Gamma阶段】第五次Scrum Meeting
[Gamma阶段]第五次Scrum Meeting 每日任务内容 今日工作任务 明日待完成任务 配合前端调整评论页面的样式 课程列表页针对移动端进行调整 戴荣 Gamma阶段后测试点样例编写 移除部分 ...
- Shell脚本之九 输入输出重定向和文件包含
输出重定向:是指不使用系统提供的标准输入端口来输出,而是重新指定其他来进行输出.例如在终端输入的字符串本来是要输出到终端屏幕上的,但可以将输出指定为其他文件,将输入字符串输出到该文件中,而不再是屏幕上 ...