一、Ajax请求——GET
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>Ajax 发送get 请求</h1> <input type="button" value="发送get_ajax请求" id='btnAjax'> <script type="text/javascript"> // 绑定点击事件 document.querySelector('#btnAjax').onclick = function () { // 发送ajax 请求 需要 五步 // （1）创建异步对象 var xmlhttp = new XMLHttpRequest(); // （2）设置请求的参数。包括：请求的方法、请求的url。 xmlhttp.open('GET', '001.php'); // （3）发送请求 xmlhttp.send(); //（4）注册事件。 onreadystatechange事件，状态改变时就会调用。 //如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。 xmlhttp.onreadystatechange = function () { // 为了保证 数据 完整返回，我们一般会判断 两个值 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的 // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示 console.log('数据返回成功'); // 数据是保存在 异步对象的 属性中 console.log(xmlhttp.responseText); // 修改页面的显示 document.querySelector('h1').innerHTML = xmlhttp.responseText; } } } </script> </body> </html>
001.php
<?php echo 'helloworld'; ?>
二、Ajax请求——POST
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="loading"></div> <table> <tr> <td>用户名</td> <td><input type="text" id="username"></td> </tr> <tr> <td>密码</td> <td><input type="password" id="password"></td> </tr> <tr> <td></td> <td><button id="btn">登录</button></td> </tr> </table> <script type="text/javascript"> var btn = document.getElementById('btn') var textUsername = document.getElementById('username') var textPassword = document.getElementById('password') btn.onclick = function(){ var username = textUsername.value var password = textPassword.value var xhr = new XMLHttpRequest() xhr.open('POST','03.php') // 以POST请求方式请求03.php xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded') // 通过post方式发送urlencoded格式请求体，必须设置相应的请求头 xhr.send(`username=${username}&password=${password}`) // es6新语法，模板字符串，通过esc键下面一个键的反引号，括起来的。注意这里面有固定格式，千万别有空格 xhr.onreadystatechange = function(){ if(this.readyState == 4){ console.log(this.responseText); } } } </script> </body> </html>
03.php
<?php if(empty($_POST['username']) || empty($_POST['password'])){ exit('请输入完整信息'); } $username = $_POST['username']; $password = $_POST['password']; if($username === 'wzx' && $password === '123456'){ exit('登录成功'); } exit('输入信息有误'); ?>
三 Ajax 请求解析JSON
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>获取 json 数据</h1> <input type="button" value="获取json" id='btnJson'> <script type="text/javascript"> // 获取的是一个 如果要获取多个 // document.querySelectorAll(selector) document.querySelector("#btnJson").onclick = function () { var ajax = new XMLHttpRequest(); ajax.open('get','myJson.php'); ajax.send(); ajax.onreadystatechange = function () { if (ajax.readyState==4&&ajax.status==200) { // json 字符串 是字符串 所以我们可以 通过 responseText获取 console.log(ajax.responseText); // 转化为 js对象 var jsObj = JSON.parse(ajax.responseText); console.log(jsObj); // 拼接ul s var str = ''; str+='<ul>'; str+='<li>'+jsObj.name+'</li>'; str+='<li>'+jsObj.skill+'</li>'; str+='<li>'+jsObj.job+'</li>'; str+='</ul>'; // 设置到界面上 document.body.innerHTML = str; } } } </script> </body> </html>
Person.json
{ "name"： "漩涡鸣人" ， "skill"： "影分身" ， "job"： "忍着" ， }
myJson.php
<?php // 读取json文件 并返回即可 echo file_get_contents('Person.json'); ?>