0616
★JSON.parse()
将 JSON 字符串直接传递给 JSON.parse()就可以得到相应的 JavaScript 值。
console.log(JSON.parse(http.response));
☆
keydown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。
keypress：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。按下 Esc 键也会触发这个事件。Safari 3.1 之前的版本也会在用户按下非字符键时触发 keypress事件。
keyup：当用户释放键盘上的键时触发。
虽然所有元素都支持以上 3 个事件，但只有在用户通过文本框输入文本时才最常用到。
只有一个文本事件：textInput。这个事件是对 keypress 的补充，用意是在将文本显示给用户之前更容易拦截文本。在文本插入文本框之前会触发 textInput 事件。在用户按了一下键盘上的字符键时，首先会触发 keydown 事件，然后紧跟着是 keypress 事件，最后会触发 keyup 事件。其中，keydown 和 keypress 都是在文本框发生变化之前被触发的；而 keyup事件则是在文本框已经发生变化之后被触发的。
如果用户按下了一个字符键不放，就会重复触发keydown 和 keypress 事件，直到用户松开该键为止。如果用户按下的是一个非字符键，那么首先会触发 keydown 事件，然后就是 keyup 事件。如果按住这个非字符键不放，那么就会一直重复触发 keydown 事件，直到用户松开这个键，此时会触发 keyup事件。
sear.onkeyup=function () {
var script=document.createElement("script");
script.id="list";
script.src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?wd="+this.value+"&cb=showData";
var sclist=document.querySelector("#list");
if (sclist)sclist.remove();
document.body.appendChild(script);
}
//如果改为onkeydown输入数字12只会输出2
★ajax异步请求
1、实例化对象
var http = new XMLHttpRequest();
2、open
get 获取 post新建 增加数据 url地址
http.open(“get”,“url”);
3、发送请求send
http.send();
4、获取服务器响应数据
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
callback(http.response);
}
5、渲染界面
example：
<div class="listinfo">
</div>
//
var listinfo = document.querySelector(".listinfo");
function showCai(res, url, callback) {
var http = new XMLHttpRequest();
http.open(res, url);
http.send();
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
callback(http.response);
}
}
}
showCai("get", "http://localhost/travel/fenqu.php", function (data) {
var datalist=JSON.parse(data);
for (var key in datalist) {
var foodlist=document.createElement("div");
var ainfo=document.createElement("a");
ainfo.href = "./fenquxi.html?id=" + datalist[key].id;
var imginfo=document.createElement("img");
imginfo.src=datalist[key].img;
foodlist.appendChild(imginfo);
var spaninfo=document.createElement("span");
spaninfo.innerHTML=datalist[key].name;
ainfo.appendChild(imginfo);
ainfo.appendChild(spaninfo);
foodlist.appendChild(ainfo);
listinfo.appendChild(foodlist);
}
});
PHP文件
header('Access-Control-Allow-Origin: * ');
//造连接对象
$db = new MySQLi("localhost","root","","test");
mysqli_query($db,"SET NAMES 'UTF8'");
//写SQL语句
$sql = "select * from fenqu";
//检测连接数据库是否成功，失败返回“连接失败”，并退出程序
if(mysqli_connect_error()){
die("连接失败");
}
//执行SQL语句,返回结果集对象
$result = mysqli_query($db,$sql);
//判断结果有无数据
$data=array();
class User{
public $id;
public $name;
public $img;
}
if($result->num_rows){
while($row = mysqli_fetch_array($result))
{
$user=new User();
$user->id=$row["id"];
$user->name=$row["name"];
$user->img=$row["img"];
$data[]=$user;
}
}
echo json_encode($data);
?>
获取id 通过id 获取数据时
<div class="block">
</div>
//
var block=document.querySelector(".block");
var id = location.href.split("?")[1].split("=")[1];
function showlist(res,url,callback) {
var http=new XMLHttpRequest();
http.open(res,url);
http.send();
http.onreadystatechange=function () {
if (http.readyState==4&&http.status==200){
callback(http.response);
}
}
}
showlist("get","http://localhost/travel/fenquxi.php?id="+id,function (data){
var datalist=JSON.parse(data);
for (var i=0;i<datalist.length;i++){
var div = document.createElement("div");
var spaninfo = document.createElement("span");
spaninfo.innerHTML = datalist[i].name;
div.appendChild(spaninfo);
block.appendChild(div);
}
/* 另一种遍历方式 */
// for (var key in datalist) {
// var foodlist = document.createElement("div");
// var ainfo = document.createElement("a");
// ainfo.href = "./菜单.html?id=" + datalist[key].id;
//
// var spaninfo = document.createElement("span");
// spaninfo.innerHTML = datalist[key].name;
// ainfo.appendChild(spaninfo);
// foodlist.appendChild(ainfo);
// block.appendChild(foodlist);
// }
})
不需要a连接时的元素添加
for (var key in datalist) {
var foodlist=document.createElement("div");
var imginfo=document.createElement("img");
imginfo.src=datalist[key].img;
foodlist.appendChild(imginfo);
var spaninfo=document.createElement("span");
spaninfo.innerHTML=datalist[key].name;
foodlist.appendChild(imginfo);
foodlist.appendChild(spaninfo);
listinfo.appendChild(foodlist);
}
☆MYSQL
查询前10条数据
$sql = " select * from table LIMIT 10";
查询最新10条数据
$sql = " select * from xinyuan order by id desc LIMIT 20";
★原生ajax的封装
请求接口时候需要 路径 方式 数据
get 方式传值 是在url 路径之后？a=1&b=2&n=3
post 不在路径上写 send() 上发送数据
function method(res, url, data, callback) {
var http = new XMLHttpRequest();
if (res == "get") {
if (data) {
url += "?";
url += data;
}
http.open(res, url);
http.send();
}
else {
http.open(res, url);
if (data) {
http.send(data);
}
else {
http.send();
}
}
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
callback(JSON.parse(http.response));
}
}
}
method("post", "./list/data.txt", null, function (data) {
console.log(data);
});
☆异步和同步
//异步
var http = new XMLHttpRequest();
http.open("get", "./list/data.txt", rue);
http.send();
function showdata(callback) {
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
callback(http.response);
}
}
}
showdata(function (data) {
console.log(data);
});
//同步
var data=null;
var http = new XMLHttpRequest();
http.open("get", "./list/data.txt",false);
http.send();
http.onreadystatechange = function () {
if (http.readyState == 4 && http.status == 200) {
console.log(1);
}
}
console.log(2);
★
☆