var submit=document.getElementById(‘submit’);
submit.onclick =function () {
var username=document.getElementById(‘username’);
var password=document.getElementById(‘password’);
//1. 新的申请
var xhr=new XMLHttpRequest();
//2 设置监听
xhr.onreadystatechange=function () {
if (xhr.readyState==4 && xhr.status==200){
alert(‘yes’);
var tip=document.getElementById(‘ha’);
var text=JSON.parse(xhr.responseText);
tip.innerHTML=’ 获得的返回内容是:’+text[0].title;
}
}
//3、设置 URl
var url=’check.php?username=’+username.value+’password=’+password.value;
xhr.open(‘get’,url,true)
//4、发送
xhr.send(null);
上面是 get 的形式提交的 浏览请求，另外还有 post 形式提交的 方法如下
// 获取按钮元素
var submit=document.getElementById(‘submit’);
submit.onclick =function () { // 按钮点击并回调函数
// 获取文本信息
var username=document.getElementById(‘username’);
var password=document.getElementById(‘password’);
// 开始执行 ajax 1234/12345
//1. 新的申请
var xhr=new XMLHttpRequest();
//2 设置监听
xhr.onreadystatechange=function () {
if (xhr.readyState==4 && xhr.status==200){
alert(‘yes’);
var tip=document.getElementById(‘ha’);
var text=JSON.parse(xhr.responseText);
tip.innerHTML=’ 获得的返回内容是:’+text[0].title;
}
}
//3、设置 URl
var url=’check.php’;
var data=’username=’+username.value+’&password=’+password.value;
xhr.open(‘post’,url,true)
//4、设置头部 在发送数据
xhr.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
xhr.send(data);
// 使原有按钮功能失效
return false
}
post 和 get 的的区别 除了 url 方面的不同 还有就是 POST 要在发送之前写头部信息，并且 send 不能填写 null 而要填写数据。至于如何发送 json 格式的数据 日后分享
继续分享
json 格式
js 前端 两个注意点
一是数据得用函数转换
data=JSON.stringify({“username”:username.value,”password”:username.value});
二是头部信息也要修改
xhr.setRequestHeader(“Content-type”,”application/json”);
PHP 后端是这样使用的
$json_raw = file_get_contents(“php://input”);
// 接收 json
$json_data = json_decode($json_raw); // 解析 json 为对象格式
// 调用
$a=$json_data->username;
print_r($a);
