简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >前端 - JS - 将JSON字符串转换为JS对象和Ajax编程

前端 - JS - 将JSON字符串转换为JS对象和Ajax编程

郴
郴原创
2020年05月27日 17:25:441230浏览

前端 - JS - 将JSON字符串转换为JS对象和Ajax编程

一、将JSON字符串转换为JS对象

1. 简单转换

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         var obj = {name: '小明', sex: '男', age: 18, email: 'xiaoming@xm.cn', study: {
  11.             school: '北京大学',
  12.             class: '软件工程一班'
  13.         }};
  14.         var json_str = JSON.stringify(obj, function(key, value){
  15.             if (key === 'name') {
  16.                 return '小王';
  17.             } else {
  18.                 return value;
  19.             }
  20.         }, 4);
  21.         var new_obj = JSON.parse(json_str);
  22.         console.log(new_obj);
  23.     </script>
  24. </body>
  25. </html>

2. 为每个属性执行回调

  1. <!DOCTYPE html>
  2. <html lang="zh_hans">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         var obj = {name: '小明', sex: '男', age: 18, email: 'xiaoming@xm.cn', study: {
  11.             school: '北京大学',
  12.             class: '软件工程一班'
  13.         }};
  14.         var json_str = JSON.stringify(obj, function(key, value){
  15.             if (key === 'name') {
  16.                 return '小王';
  17.             } else {
  18.                 return value;
  19.             }
  20.         }, 4);
  21.         var new_obj = JSON.parse(json_str, function(key, value){
  22.             switch (key) {
  23.                 case 'name':
  24.                     return '小赵';
  25.                 case 'age':
  26.                     return 20;
  27.                 default:
  28.                     return value;
  29.             }
  30.         });
  31.         console.log(new_obj);
  32.     </script>
  33. </body>
  34. </html>

二、Ajax编程

1. GET请求

  • 流程
  1. 1. 创建Ajax对象
  2. 2. 监听请求
  3. 3. 初始化请求参数
  4. 4. 发送请求
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Ajax-GET</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       // 1. 创建Ajax对象
  11.       var xhr = new XMLHttpRequest();
  13.       // 2. 监听请求
  14.       xhr.onreadystatechange = function () {
  15.         if (xhr.readyState === 4 && xhr.status === 200) {
  16.           console.log(xhr.responseText);
  17.         }
  18.       };
  20.       // 3. 初始化请求参数
  21.       xhr.open("GET", "ajget.php", true);
  23.       // 4. 发送请求
  24.       xhr.send(null);
  25.     </script>
  26.   </body>
  27. </html>
  1. $user = ["name"=>'jack', "sex"=>'male', "age"=>18];
  2. echo  json_encode($user);

2. POST请求

  • 流程
  1. 1. 创建Ajax对象
  2. 2. 监听请求
  3. 3. 初始化请求参数
  4. 4. 设置请求头，模拟表单类型的数组进行发送（包括application/x-www-form-urlencoded和application/json）
  5. 5. 发送请求
  • 请求头数据类型为表单数据
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Ajax-GET</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       // 1. 创建Ajax对象
  11.       var xhr = new XMLHttpRequest();
  13.       // 2. 监听请求
  14.       xhr.onreadystatechange = function () {
  15.         if (xhr.readyState === 4 && xhr.status === 200) {
  16.           console.log(xhr.responseText);
  17.         }
  18.       };
  20.       // 3. 初始化请求参数
  21.       xhr.open("POST", "ajpost1.php", true);
  23.       // 4. 设置请求头
  24.       xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
  26.       //定义一个对象
  27.       var user = {
  28.         name: '小明',
  29.         sex: '男',
  30.         age: 18
  31.       };
  33.       //转为json字符串
  34.       var data = JSON.stringify(user);
  36.       // 4. 发送请求
  37.       xhr.send(data);
  38.     </script>
  39.   </body>
  40. </html>
  1. <?php
  2. //键为从前端传过来的数据
  3. print_r($_POST);
  4. //获取数据
  5. $data = key($_POST);
  6. //将json字符串转为对象
  7. $user = json_decode($data);
  8. print_r($user);
  9. //将json字符串转为数组
  10. $user = json_decode($data, true);
  11. print_r($user);

  • 请求头数据类型为JSON数据（服务端需要使用原始文件流接受json数据）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Ajax-GET</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       // 1. 创建Ajax对象
  11.       var xhr = new XMLHttpRequest();
  13.       // 2. 监听请求
  14.       xhr.onreadystatechange = function () {
  15.         if (xhr.readyState === 4 && xhr.status === 200) {
  16.           console.log(xhr.responseText);
  17.         }
  18.       };
  20.       // 3. 初始化请求参数
  21.       xhr.open("POST", "ajpost2.php", true);
  23.       // 4. 设置请求头
  24.       xhr.setRequestHeader("content-type", "application/json;charset=utf-8");
  26.       //定义一个对象
  27.       var user = {
  28.         name: '小明',
  29.         sex: '男',
  30.         age: 18
  31.       };
  33.       //转为json字符串
  34.       var data = JSON.stringify(user);
  36.       // 4. 发送请求
  37.       xhr.send(data);
  38.     </script>
  39.   </body>
  40. </html>
  1. <?php
  3. //获取数据
  4. $data = file_get_contents('php://input');
  5. echo $data;
  6. //将json字符串转为对象
  7. $user = json_decode($data);
  8. print_r($user);

3. POST-FormData

  • 流程
  1. 1. 创建Ajax对象
  2. 2. 监听请求
  3. 3. 初始化请求参数
  4. 4. 发送请求
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         // 1. 创建Ajax对象
  11.         var xhr = new XMLHttpRequest();
  12.         // 2. 监听请求
  13.         xhr.onreadystatechange = function() {
  14.             if (xhr.readyState === 4 && xhr.status === 200) {
  15.                 console.log(xhr.responseText);
  16.             }
  17.         };
  18.         // 3. 初始化请求参数
  19.         xhr.open("POST", "work.php", true);
  20.         //创建formdata对象
  21.         var data = new FormData();
  22.         data.append("username", "admin");
  23.         data.append("password", "qwer1234");
  24.         // 4. 发送请求
  25.         xhr.send(data);
  26.     </script>
  27. </body>
  28. </html>
  1. print_r($_POST);

4. POST-FormData（无刷新登录验证）

  1. <?php
  2. //判断是否登录
  3. if (isset($_COOKIE['user'])) {
  4.     //如果已登录则输出请勿重复登录的信息并返回首页
  5.     exit('<script>alert("请勿重复登录");location.href="/index.php"</script>');
  6. }
  7. ?>
  9. <!DOCTYPE html>
  10. <html lang="zh_hans">
  11. <head>
  12.     <meta charset="UTF-8">
  13.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14.     <title>登录页</title>
  15.     <link rel="stylesheet" href="\css\login.css">
  16. </head>
  17. <body>
  18.     <h2>登录表单</h2>
  19.     <div class="f-box">
  20.         <!--取消表单的默认提交,改为自定义的Ajax提交-->
  21.         <form action="" method="POST" onsubmit="return false">
  22.             <fieldset>
  23.                 <div class="e-box">
  24.                     <label for="email">邮箱：</label>
  25.                     <input type="email" name="email" id="email" require autofocus autocomplete="on">
  26.                 </div>
  27.                 <div class="p-box">
  28.                     <label for="password">密码：</label>
  29.                     <input type="password" name="password" id="password" require>
  30.                 </div>
  31.                 <div class="s-box">
  32.                     <button type="submit">提交</button>
  33.                 </div>
  34.                 <div class="o-box">
  35.                     <!--链接到注册页-->
  36.                     <a href="register.php">还没有账户？注册一个吧！</a>
  37.                 </div>
  38.             </fieldset>
  39.         </form>
  40.     </div>
  41.     <!--ajax提交表单数据-->
  42.     <script>
  44.         //获取表单和按钮
  45.         var form = document.querySelector("form");
  46.         var bth = document.querySelector("button");
  48.         //给按钮绑定点击事件，进行Ajax请求
  49.         bth.onclick = function() {
  50.             // 1. 创建Ajax对象
  51.             var xhr = new XMLHttpRequest();
  52.             // 2. 监听请求并将返回的提示信息展示在页面上
  53.             xhr.onreadystatechange = function() {
  54.                 if (xhr.readyState === 4 && xhr.status === 200) {
  56.                     //将返回的json字符串转为js对象
  57.                     var res = JSON.parse(xhr.responseText);
  58.                     //根据状态代码输出相应的提示信息
  59.                     switch (res.status) {
  60.                         case 0:
  61.                         case 1:
  62.                             error = res.message;
  63.                         break;
  64.                         default:
  65.                             error = '未知错误';
  66.                     }
  68.                     //将提示信息展示在表单中
  69.                     var span = document.createElement("span");
  70.                     span.innerHTML = error;
  71.                     span.style.color = "red";
  72.                     form.appendChild(span);
  73.                 }  
  74.             };
  75.             // 3. 初始化请求参数
  76.             xhr.open("POST", "../handle.php", true);
  77.             // 4. 打包数据
  78.             var data = new FormData(form);
  79.             // 5. 发送请求
  80.             xhr.send(data);
  81.         };
  83.         //清除提示信息
  84.         var inputs = document.querySelectorAll("input");
  85.         for (var i = 0; i < inputs.length; i++) {
  86.             inputs[i].oninput = function() {
  87.                 if (document.getElementsByTagName("fieldset")[0].nextElementSibling !== null) {
  88.                     form.removeChild(document.getElementsByTagName("fieldset")[0].nextElementSibling);
  89.                 }
  90.             };
  91.         }
  94.     </script>
  95. </body>
  96. </html>
  1. <?php
  3. //1. 获取表中用户名、邮箱和密码字段数据
  4. $pdo = new PDO('mysql:host=localhost;dbname=shopping', 'root', 'root');
  5. $stmt = $pdo->prepare('SELECT `user_name`, `email`, `passwd` FROM `userinfo`');
  6. $stmt->execute();
  7. $t_data = $stmt->fetchAll(PDO::FETCH_ASSOC);
  9. //2. 处理用户登录
  10.         //判断请求是否合法
  11.         if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  12.             //获取从前端传过来的数据
  13.             $f_email = $_POST['email'];
  14.             $f_passwd = md5($_POST['password']);
  15.             //与后台数据进行校验并获取
  16.             $results = array_filter($t_data, function($user) use ($f_email, $f_passwd) {
  17.                 return $user['email'] === $f_email && $user['passwd'] === $f_passwd;
  18.             });
  19.             //如果有记录证明校验成功并在客户端设置用户cookie
  20.             if (count($results) === 1) {
  21.                 $user_v = (current($results))['user_name'];
  22.                 setcookie('user', $user_v);
  23.                 //返回验证通过的提示信息
  24.                 echo json_encode(['status'=>1, 'message'=>'验证通过']);
  25.             } else {
  26.                 //返回验证失败的提示信息
  27.                 echo json_encode(['status'=>0, 'message'=>'邮箱或密码错误，或者还未注册账户']);
  28.             }
  29.         } else {
  30.             die('请求类型错误');
  31.         }



四、课程总结

  • 今天学习了 JavaScript 的Ajax编程，通过上课认真听讲和认真完成老师布置的作业，使得我对 Ajax 的理解和运用更加深入和熟悉。最主要的知识点是明白和掌握了Ajax请求的特点以及它的基本语法。
上一条：JS事件添加与事件委托下一条：JS项目实践：Todolist留言与删除、轮播图
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多