search

博客列表 >实例演示Ajax-post的三种方式

实例演示Ajax-post的三种方式

N.
N.原创
2020年11月08日 15:25:271074浏览

1. 同步与异步

以前端请求,后端响应为例

  • 同步: 前端发请求, 必须等到后端响应完成,才允许发送另一个请求
  • 异步: 前端发请求后不等待后端响应结果继续执行,后端响应完成通过事件通知前端处理

异步最常用的处理形式就是回调函数

2. XMLHttpRequest 对象：XMLHttpRequest是浏览器提供的,处理异步请求的宿主对象,而非 JS 内置对象
3. GET 请求
  1. 创建请求对象: new XMLHttpRequest()
  2. 监听请求回调: onreadystatechange
  3. 初始化请求参数: open(请求类型,请求地址,是否异步)
  4. 发送请求: send()
  • 服务器: 返回 JSON
  • 前端: JSON.parse()解析 JSON 字符串
4. POST 请求
  • 请求流程:
  1. 创建请求对象: new XMLHttpRequest()
  2. 监听请求回调: onreadystatechange()
  3. 初始化请求参数: open(请求类型,请求地址,是否异步)
  4. 设置请求头: setRequestHeader()
  5. 发送请求: send(data)

post 与 get 相比, 多了一步: 设置请求头

  • 前端: 发送 JSON
  • 后端:
    • json 数据以表单数据类型发送,可$_POST 接收
    • json 数组就是以 JSON 发送, php://input 流文件方式接收
5. FormData
  • 可直接序列化表单数据
  • 可直接被 Ajax 识别,所以可以不设置请求头

  • 除了表单数据外,也可用于普通数据

    GET 请求实例演示：

    代码如下

    1. <html lang="">
    2. <head>
    3.   <meta charset="UTF-8" />
    4.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    5.   <title>Document</title>
    6.   <style>
    7.       form {
    8.       display: inline-grid;
    9.       grid-template-columns: 5em 15em;
    10.       gap: 1em;
    12.       padding: 1em;
    13.       border: 1px solid #000;
    14.       background-color: lightcyan;
    15.     }
    16.     form button {
    17.       grid-area: auto / 2 / auto / span 1;
    18.     }
    19.   </style>
    20. </head>
    21. <body>
    22.   <form action="" onsubmit="return false;">
    23.     <label for="username">用户名:</label>
    24.     <input type="text" id="username" name="username" />
    25.     <label for="email">邮箱:</label>
    26.     <input type="email" id="email" name="email" />
    27.     <button>保存</button>
    28.   <script>
    29.     // 1. 创建请求对象: `new XMLHttpRequest()`
    30.     const aaa = new XMLHttpRequest();
    31.     // 2. 监听请求回调: `onreadystatechange`
    32.     aaa.addEventListener("readystatechange", hanshu, false);
    33.     // 3. 初始化请求参数: `open(请求类型,请求地址,是否异步)`
    34.     aaa.open("GET", "hhhh/text.php", true);
    35.     // 4. 发送请求: `send()`
    36.     aaa.send(null);
    37.     /////
    38.     function hanshu() {
    39.       if (aaa.readyState === 4) {
    40.         console.log(aaa.responseText);
    41.         const user = JSON.parse(aaa.responseText);
    42.         console.log(user);
    43.         // alue=user.后面aa和ccc对应的是php文档里的数据名称
    44.         document.querySelector("#username").value=user.aa
    45.         document.querySelector("#email").value=user.ccc
    46.       }
    47.     }
    48.   </script>
    49. </body>
    50. </html>

    php代码

    1. echo json_encode(['aa'=>'bbb', 'ccc'=>'ssss']);

页面效果

GTE请求

  1. <html lang="">
  2.   <head>
  3.     <meta charset="UTF-8" />
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5.     <title>Document</title>
  6.   </head>
  7.   <body>
  8.     <script>
  9.       // 1. 创建请求对象: `new XMLHttpRequest()`
  10.       const aaa = new XMLHttpRequest();
  11.       // 2. 监听请求回调: `onreadystatechange`
  12.       aaa.addEventListener("readystatechange", hanshu, false);
  13.       // 3. 初始化请求参数: `open(请求类型,请求地址,是否异步)`
  14.       aaa.open("POST", "hhhh/text2.php", true);
  15.       // 4. 设置请求头: `setRequestHeader()`
  16.       //   以表单键值对的方式
  17.       aaa.setRequestHeader("content-type", "application/x-www-form-urlencoded");
  19.       const user = {
  20.         email: "admin@php.cn",
  21.         password: "123456",
  22.       };
  23.       //   js转json
  24.       const bbbb = JSON.stringify(user);
  25.       // 5. 发送请求: `send()`
  26.       aaa.send(bbbb);
  27.       /////
  28.       function hanshu() {
  29.         if (aaa.readyState === 4) {
  30.           console.log(aaa.responseText);
  31.         }
  32.       }
  33.     </script>
  34.   </body>
  35. </html>

php代码

  1. <?php
  2. // print_r($_POST);
  3. $date=key($_POST);
  4. echo $date;
  5. // echo "aaaa";

效果图

FormData代码:

  1. <html lang="">
  2.   <head>
  3.     <meta charset="UTF-8" />
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5.     <title>Document</title>
  6.     <style>
  7.         form {
  8.         display: inline-grid;
  9.         grid-template-columns: 5em 15em;
  10.         gap: 1em;
  12.         padding: 1em;
  13.         border: 1px solid #000;
  14.         background-color: lightcyan;
  15.       }
  16.       form button {
  17.         grid-area: auto / 2 / auto / span 1;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <form action="" onsubmit="return false;">
  23.       <label for="username">用户名:</label>
  24.       <input type="text" id="username" name="username" />
  25.       <label for="email">邮箱:</label>
  26.       <input type="email" id="email" name="email" />
  27.       <button>保存</button>
  28.     <script>
  29.      const form=document.querySelector("form");
  30.      const but=document.querySelector("button")
  31.       // 1. 创建请求对象: `new XMLHttpRequest()`
  32.       const aaa = new XMLHttpRequest();
  33.       but.addEventListener("click",zzz,false)
  34.       function zzz(aa) {
  35.     // 2. 监听请求回调: `onreadystatechange`
  36.       aaa.addEventListener("readystatechange", hanshu, false);
  37.       // 3. 初始化请求参数: `open(请求类型,请求地址,是否异步)`
  38.       aaa.open("POST", "hhhh/text3.php", true);
  39.       // 4. 发送请求: `send()`
  40.       // new FormData(form): 当前表单数据的封装
  41.       aaa.send(new FormData(form));
  42.       }
  43.       /////
  44.       function hanshu(ev) {
  45.         if (aaa.readyState === 4) {
  46.           console.log(aaa.responseText);
  47.         }
  48.       }
  49.     </script>
  50.   </body>
  51. </html>

PHP代码：

  1. print_r($_POST);

效果图

jsonp跨域
上一条：Javascript实战案例下一条：dom元素的操作和JS实战案例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议