search

博客列表 >Ajax和JSON（0812）

Ajax和JSON（0812）

丶久而旧之丶
丶久而旧之丶原创
2020年09月18日 15:54:31622浏览

Ajax和json

json

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  11. <body>
  12.     <ul>
  13.         <li></li>
  14.         <li></li>
  15.         <li></li>
  16.     </ul>
  17.     <script>
  18.         // 将json字符串转为js对象
  19.         // 多行字符串需要加入'\'
  20.         var js1 = '{\
  21.             "name":"admin",\
  22.             "age":20,\
  23.             "like":"打篮球"\
  24.             }';
  25.         var obj = JSON.parse(js1);
  26.         console.log(obj);
  27.         var lis = document.querySelector('li:first-of-type');
  28.         lis.innerHTML = obj.name;
  29.         var lis1 = document.querySelector('li:nth-of-type(2)');
  30.         lis1.innerHTML = obj.age;
  31.         var lis2 = document.querySelector('li:last-of-type');
  32.         lis2.innerHTML = obj.like;
  33.         var str = '{\
  34.             "name": "admin",\
  35.             "age": 20,\
  36.             "marriage": true,\
  37.             "course": {\
  38.                 "name": "php",\
  39.                 "grade": 90\
  40.             }\
  41.         }';
  42.         // parse可以转入参数对转换数据进行处理
  44.         var obj = JSON.parse(str, function (key, value) {
  45.             if (key === "marriage") {
  46.                 return '不要再来骚扰我了';
  47.             }
  48.             return value;
  49.         });
  50.         console.log(obj);
  51.         var pe = {
  52.             name: obj.name,
  53.             age: obj.age,
  54.             courseName: obj.course.name,
  55.             courseGrade: obj.course.grade,
  56.         };
  57.         console.log(pe);
  58.         // 渲染到页面
  59.         var ul = document.createElement("ul");
  60.         var li = "";
  61.         for (var key in pe) {
  62.             li += "<li>" + pe[key] + "</li>";
  63.         }
  64.         console.log(li);
  65.         ul.innerHTML = li;
  66.         // 插入到页面中
  67.         document.body.appendChild(ul);
  68.     </script>
  69. </body>
  71. </html>

Ajax

GET方式

  1. var btn = document.querySelector('button');
  2. btn.addEventListener('click', get, false);
  3. function get() {
  4.     // GET请求
  5.     // 1.创建ajax对象
  6.     var aj = new XMLHttpRequest();
  8.     // 2.监听请求
  9.     aj.onreadystatechange = function () {
  10.         if (aj.readyState === 4 && aj.status === 200) {
  11.             console.log(aj.responseText);
  12.             // 凡是涉及页面DOM操作都放在监听请求中
  13.             var obj = JSON.parse(aj.responseText);
  14.             console.log(obj);
  15.             document.querySelector('p:first-of-type').innerHTML = obj.name;
  16.             document.querySelector("p:nth-of-type(2)").innerHTML = obj.age;
  17.             document.querySelector("p:last-of-type").innerHTML = obj.course;
  18.         }
  20.     };
  21.     // 3.初始化请求参数
  22.     // open(请求类型，请求的URL地址，是否异步/默认异步)
  23.     aj.open("GET", "0812.php?id=2");
  25.     // 4.发送请求(get方式没有请求参数)
  26.     aj.send(null);
  27. }

php代码

  1. <?php
  2. $users = [
  3.     ['id' => 1, 'name' => 'admin', 'age' => 18, 'course' => 'PHP'],
  4.     ['id' => 2, 'name' => 'useradmin', 'age' => 20, 'course' => 'JAVA'],
  5. ];
  6. $id = $_GET['id'];
  7. foreach ($users as $value) {
  8.     if ($value['id'] == $id) {
  9.         echo json_encode($value);
  10.     }
  11. }

POST方式

方式1

  1. var btn = document.querySelector('button');
  2. btn.addEventListener('click', get, false);
  3. function get() {
  4.     // POST请求
  5.     // 1.创建ajax对象
  6.     var aj = new XMLHttpRequest();
  8.     // 2.监听请求
  9.     aj.onreadystatechange = function () {
  10.         if (aj.readyState === 4 && aj.status === 200) {
  11.             console.log(aj.responseText);
  12.         }
  13.     };
  14.     // 3.初始化请求参数
  15.     // open(请求类型，请求的URL地址，是否异步/默认异步)
  16.     aj.open("POST", "0812.php");
  18.     // 4.设置请求头（用键值对模拟表单方式发送数据）
  19.     aj.setRequestHeader("content-type", "application/x-www-form-urlencoded");
  20.     // 准备数据（可以写入对象通过方法转换为json字符串后再发送）
  21.     var user = {
  22.         name: "admin",
  23.         password: "123456",
  24.     };
  25.     var date = JSON.stringify(user);
  26.     // 5.发送请求(可以手工加入键)
  27.     aj.send("user=" + date);
  28. }

PHP代码

  1. print_r($_POST);
  2. $user = json_decode($_POST['user']);
  3. echo $user->name . ":" . sha1($user->password);

POST方式2

  1. // POST方式2(直接发送json字符串)
  2. var btn = document.querySelector('button');
  3. btn.addEventListener('click', get, false);
  4. function get() {
  5.     // POST请求
  6.     // 1.创建ajax对象
  7.     var aj = new XMLHttpRequest();
  9.     // 2.监听请求
  10.     aj.onreadystatechange = function () {
  11.         if (aj.readyState === 4 && aj.status === 200) {
  12.             console.log(aj.responseText);
  13.         }
  15.     };
  16.     // 3.初始化请求参数
  17.     // open(请求类型，请求的URL地址，是否异步/默认异步)
  18.     aj.open("POST", "0812.php");
  20.     // 4.设置请求头
  21.     // 直接把请求头内容设置为json
  22.     aj.setRequestHeader("content-type", "application/json;charset=utf-8");
  23.     // 准备数据（可以写入对象通过方法转换为json字符串后再发送）
  24.     var user = {
  25.         name: "admin",
  26.         password: "123456",
  27.     };
  28.     var date = JSON.stringify(user);
  29.     // 5.发送请求
  30.     aj.send(date);
  31. }

php代码

  1. // POST方式2
  2. // 前端不是通过模拟表单进行发送那么用$_POST里面就没有数据需要在输入流中获取数据
  3. $data = file_get_contents("php://input");
  4. // 然后解析json
  5. $user = json_decode($data);
  6. echo $user->name . ':' . $user->password;

POST方式3（使用表单对象/推荐）

  1. var btn = document.querySelector('button');
  2. btn.addEventListener('click', get, false);
  3. function get() {
  4.     // POST请求
  5.     // 1.创建ajax对象
  6.     var aj = new XMLHttpRequest();
  8.     // 2.监听请求
  9.     aj.onreadystatechange = function () {
  10.         if (aj.readyState === 4 && aj.status === 200) {
  11.             console.log(aj.responseText);
  12.         }
  14.     };
  15.     // 3.初始化请求参数
  16.     // open(请求类型，请求的URL地址，是否异步/默认异步)
  17.     aj.open("POST", "0812.php");
  19.     // 4.使用FormData对象发送数据
  20.     var date = new FormData();
  21.     // 向对象中添加数据
  22.     date.append("name", "admin");
  23.     date.append("password", "789456");
  25.     // 5.发送请求
  26.     aj.send(date);
  27. }

php代码

  1. // POST方式3
  2. print_r($_POST);

Ajax-FormData-JSON

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Ajax案例演示</title>
  8. </head>
  10. <body>
  11.     <form method="POST" onsubmit="return false">
  12.         <input type="email" name="email" placeholder='exam@email.com' required autofocus>
  13.         <input type="password" name="password" placeholder='请输入密码' required>
  14.         <button>登录</button>
  15.     </form>
  16.     <script>
  17.         // 获取元素
  18.         var form = document.querySelector('form');
  19.         var btn = document.querySelector('form>button');
  22.         // 2.给按钮绑定事件
  23.         btn.onclick = function () {
  24.             // 1.创建ajax对象
  25.             var aj = new XMLHttpRequest();
  27.             // 2.监听请求
  28.             aj.onreadystatechange = function () {
  29.                 if (aj.readyState === 4 && aj.status === 200) {
  30.                     // console.log(aj.responseText);
  31.                     var obj = JSON.parse(aj.responseText);
  32.                     console.log(obj);
  33.                     var p = document.createElement('p');
  34.                     switch (obj.status) {
  35.                         case 1:
  36.                             error = obj.message;
  37.                             p.style.color = "green";
  38.                             break;
  39.                         case 2:
  40.                             error = obj.message;
  41.                             p.style.color = "red";
  42.                             break;
  43.                         default:
  44.                             error = '未知错误';
  45.                     }
  46.                     p.innerHTML = error;
  47.                     form.appendChild(p);
  48.                 }
  49.             }
  51.             // 3.初始化请求参数
  52.             aj.open("POST", "0812.php");
  53.             // 4.使用FormData对象组织数据，最终以表单数据方式发送
  54.             var data = new FormData(form);
  55.             // data.append("email", form.email.value);
  56.             // data.append("password", form.password.value);
  58.             // 5.发送请求
  59.             aj.send(data);
  61.         };
  62.     </script>
  63. </body>
  65. </html>

php代码

  1. $user = ["email" => "mingzi@qq.com", "password" => "123456"];
  2. $email = $_POST['email'];
  3. $password = $_POST['password'];
  4. if ($email == $user['email'] && $password == $user['password']) {
  5.     echo json_encode(["status" => 1, "message" => "验证通过"]);
  6. } else {
  7.     echo json_encode(["status" => 2, "message" => "邮箱或者密码错误"]);
  8. }

总结

1.了解了异步请求的执行流程
2.有个疑问 后端返回的数据一定要通过JSON字符串返回前端，前端才能调用是吗

上一条：中件间创建、注册、触发-laravel-60课9.17下一条：Laravel的where派生查询以及中间件的意义
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多