爱站程序员基地一、HTML与CSS
[code]<div class=\"container\"><h2>ajax</h2><div class=\"message\">hello world</div><button class=\"btn\">getAjax</button></div>
[code]<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实现
[code][{\"id\":1,\"name\":\"用户一\",\"age\":18},{ \"id\":2,\"name\":\"用户二\",\"age\":18},{\"id\":3,\"name\":\"用户三\",\"age\":18}]
my.json
[code]<?php$name=$_POST[\'json\'];echo $name;?>
a.php
1.原生js获取数据
[code]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发送数据
[code] 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获取数据
[code]$(\'.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发送数据
[code]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\”响应头来发送数据的话，如下：
[code]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\”只能发送字符串。
[code]<?php$name=file_get_contents(\"php://input\");echo $name;?>
php://input 是个可以访问请求的原始数据的只读流。
