一、HTML与CSS
<div class="container">
<h2>ajax</h2>
<div class="message">hello world</div>
<button class="btn">getAjax</button>
</div>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.container{
height: 100vh;
display: flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.message{
width: 300px;
margin-top: 2rem;
padding: 10px;
background-color:#888;
}
button{
margin-top: 2rem;
padding: 10px 20px;
background-color:#123456;
color:#fff;
border-radius:5px;
outline: none;
border: none;
cursor:pointer;
}
button:hover{
background-color:#654321;
}
</style>
效果:
二、AJAX实现
[
{
"id":1,
"name":"用户一",
"age":18
},
{ "id":2,
"name":"用户二",
"age":18
},
{
"id":3,
"name":"用户三",
"age":18
}
]
my.json
<?php
$name=$_POST['json'];
echo $name;
?>
a.php
1.原生js获取数据
document.getElementsByClassName('btn')[0].onclick=function(){
var xml=new XMLHttpRequest();
xml.open('GET','./json/my.json',true);
xml.send();
xml.onreadystatechange=function(){
if(xml.readyState==4&&xml.status==200){
var obj=JSON.parse(xml.responseText);
var html='';
html += "<div class='div'><table border=1>";
obj.forEach((v,i)=>{
html+="<tr>";
for(var key in v){
html+="<td>"+v[key]+"</td>";
}
html+="</tr>";
})
html+="</div></table>";
document.getElementsByClassName('message')[0].innerHTML=html;
console.log(JSON.parse(xml.responseText));
}
}
}
JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串,而JSON.parse()可以将JSON字符串转为一个对象。
效果:
2.原生js发送数据
var data = {
"student1":"one",
"student2":"two"};
document.getElementsByClassName('btn')[0].onclick=function(){
var xml=new XMLHttpRequest();
xml.open('POST','./json/a.php',true);
xml.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xml.send("json="+JSON.stringify(data));
xml.onreadystatechange=function(){
if(xml.readyState==4 && xml.status==200){
document.getElementsByClassName('message')[0].innerHTML=xml.responseText;
console.log(JSON.parse(xml.responseText));
}
};
}
如果用post发送数据需要设置响应头,‘application/x-www-form-urlencoded’是表单的请求头,数据以key1=val1&key2=val2 的方式进行编码。
3.jquery获取数据
$('.btn').click(function(){
$.ajax({
url:'./json/my.json',
type:'get',
data:'',
dataType:'json',
success:function(re){
console.log(re);
$('.message').html(JSON.stringify(re));
}
})
})
jq封装后的ajax获取成功后得到的是对象,而不是json字符串。
4.jquery发送数据
var data = {
"student1":"one",
"student2":"two"};
$('.btn').click(function(){
console.log('click');
$.ajax({
url:'./json/a.php',
type:'POST',
data:"json="+JSON.stringify(data),
dataType:'json',
contentType: "application/x-www-form-urlencoded",
success:function(re){
console.log(re);
$('.message').html(JSON.stringify(re));
}
})
})
contentType: "application/x-www-form-urlencoded" 如果默认要使用表单方式提交,可以不加,因为jq封装的ajax默认是表单提交请求头的。
----------------------------------------------------------------------------------------请求头
application/x-www-form-urlencoded | 发送前编码所有字符(默认),提交的数据按照 key1=val1&key2=val2 的方式进行编码,key 和 val 都进行了 URL 转码。大部分服务端语言都对这种方式有很好的支持。 |
multipart/form-data | 不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。一个常见的 POST 数据提交的方式。我们使用表单上传文件时,必须将 enctype设为 multipart/form-data。 |
application/json | 作为请求头告诉服务端消息主体是序列化的JSON字符串。除低版本的IE,基本都支持。 |
text/plain | 空格转换为 “+” 加号,但不对特殊字符编码。 |
如果ajax使用contentType: "application/json"响应头来发送数据的话,如下:
var data = {
"student1":"one",
"student2":"two"};
$('.btn').click(function(){
console.log('click');
$.ajax({
url:'./json/a.php',
type:'POST',
data:JSON.stringify(data),
dataType:'json',
contentType: "application/json",
success:function(re){
console.log(re);
$('.message').html(JSON.stringify(re));
}
})
})
然而这样就无法使用$_POST获取数据了,需要使用file_get_contents("php://input")。
注:contentType: "application/json"只能发送字符串。
<?php
$name=file_get_contents("php://input");
echo $name;
?>
php://input 是个可以访问请求的原始数据的只读流。