微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 前端 - JS - 将JSON字符串转换为JS对象和Ajax编程
博主信息
博文 33
粉丝 0
评论 0
访问量 35140
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
前端 - JS - 将JSON字符串转换为JS对象和Ajax编程
郴
原创
1473人浏览过

前端 - 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请求的特点以及它的基本语法。
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：ajax是一门非常成熟的技术, 步骤都是固定且规范的, 不难理解和掌握
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录