AJAX编程第二天理论、知识点以及演示代码：Chrome浏览器插件安装以及form表单与模板引擎

最新推荐文章于 2023-05-31 10:16:29 发布

库库好困

最新推荐文章于 2023-05-31 10:16:29 发布

阅读量547

点赞数

分类专栏：八：AJAX编程（看视频）文章标签： ajax

本文链接：https://blog.csdn.net/m0_46597922/article/details/106227953

版权

这篇博客介绍了如何安装Chrome浏览器插件，讲解了form表单的属性和同步提交的问题，推荐了使用Ajax进行异步提交，并通过jQuery收集表单数据。同时，文章探讨了模板引擎的概念，重点讲解了art-template的安装和基本使用，包括标准语法的输出、条件和循环操作。最后，提供了案例和代码演示。

摘要由CSDN通过智能技术生成

今天目标

安装浏览器插件
聊天机器人案例
Form表单提交
模板引擎（新的概念，难点）
两个案例

Chrome浏览器插件安装

安装步骤

下载插件的网站：

https://www.gugeapps.net/ 无需扫码
http://www.cnplugins.com/ 需要扫二维码验证
从上述两个网站下载的插件，和从Chrome商店下载的插件是一样的。只不过Chrome商店被和谐了，打不开。

如何安装使用插件

下载下来的插件形如 JSONView.crx。可以把后缀换成 zip
使用解压软件解压它，得到一个文件夹

在这里插入图片描述

Chrome --> 更多工具 --> 扩展程序 --> 打开开发者模式 --> 加载已解压的扩展程序 --> 选择上一步解压得到的文件夹
最终效果

postman

在这里插入图片描述

1. form表单的基本使用

1.1 什么是表单

表单在网页中主要负责数据采集功能。HTML中的<form>标签，就是用于采集用户输入的信息，并通过 <form>标签的提交操作，把采集到的信息提交到服务器端进行处理。
在这里插入图片描述

1.2 表单的组成部分

在这里插入图片描述

form标签
表单域
- input type=“text”
- input type=“password”
- input type=“checkbox”
- input type=“radio”
- input type=“file” 文件域
- input type=“hidden” 隐藏域
- select>option
- textarea 多行文本域
按钮:

<!--下面的按钮 会 造成表单的提交-->
<button> 提交 </button>   ====  <button  type="submit"></button>   ====   <input type="submit" value="提交" />

<!--下面的按钮 不会 造成表单的提交-->
<button  type="button">提交<button>  =====   <input type="button" value="提交" />

1.3 `<form>`标签的属性

<form>标签用来采集数据，标签的属性则是用来规定如何把采集到的数据发送到服务器。
在这里插入图片描述
演示 form 属性代码：

<body>
    <!--- 
        action 属性，表示表单提交的地址，默认空，表示提交到当前页面
        method 属性，表示提交方式，可选GET和POST，默认是GET
    --->
    <form action="http://www.liulongbin.top:3006/api/addbook" method="POST">
        <input type="text" name="bookname"><br>
        <input type="text" name="author"><br>
        <input type="text" name="publisher"><br>
        <button type="submit">提交</button>
    </form>
</body>

提前了解：

GET方式提交表单，我们输入的值(请求参数)会拼接到url后面。
POST方式提交表单，请求参数，不会拼接到url上。

1. action

action 属性用来规定当提交表单时，向何处发送表单数据。
action 属性的值应该是后端提供的一个 URL 地址，这个 URL 地址专门负责接收表单提交过来的数据。
当 <form> 表单在未指定 action 属性值的情况下，action 的默认值为当前页面的 URL 地址。

注意：当提交表单后，页面会立即跳转到 action 属性指定的 URL 地址

2. target

target 属性用来规定在何处打开 action URL。

它的可选值有5个，默认情况下，target 的值是 _self，表示在相同的框架中打开 action URL。
在这里插入图片描述

3. method

method 属性用来规定以何种方式把表单数据提交到 action URL。
它的可选值有两个，分别是 get 和 post。
默认情况下，method 的值为 get，表示通过URL地址的形式，把表单数据提交到 action URL。

注意：

get 方式适合用来提交少量的、简单的数据。
post 方式适合用来提交大量的、复杂的、或包含文件上传的数据。
在实际开发中，<form> 表单的 post 提交方式用的最多，很少用 get。例如登录、注册、添加数据等表单操作，都需要使用 post 方式来提交表单。

4. enctype

enctype 属性用来规定在发送表单数据之前如何对数据进行编码。

它的可选值有三个，默认情况下，enctype 的值为 application/x-www-form-urlencoded，表示在发送前编码所有的字符。

在这里插入图片描述
注意：

在涉及到文件上传的操作时，必须将 enctype 的值设置为 multipart/form-data
如果表单的提交不涉及到文件上传操作，则直接将 enctype 的值设置为 application/x-www-form-urlencoded 即可！

1.4 表单的同步提交及缺点

1. 什么是表单的同步提交

通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交。

2. 表单同步提交的缺点

① <form>表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差。
② <form>表单同步提交后，页面之前的状态和数据会丢失。

思考：如何解决上述两个问题？

演示代码：

<body>
    <!--- 
        action 属性，表示表单提交的地址，默认空，表示提交到当前页面
        method 属性，表示提交方式，可选GET和POST，默认是GET
    --->
    <form action="http://www.liulongbin.top:3006/api/addbook" method="POST">
        <input type="text" name="bookname"><br>
        <input type="text" name="author"><br>
        <input type="text" name="publisher"><br>
        <button type="submit">提交</button>
    </form>
</body>

3. 如何解决表单同步提交的缺点

如果使用表单提交数据，则会导致以下两个问题：
① 页面会发生跳转
② 页面之前的状态和数据会丢失

解决方案：表单只负责采集数据，Ajax 负责将数据提交到服务器。

代码演示：

<body>
    <!--- 
        action 属性，表示表单提交的地址，默认空，表示提交到当前页面
        method 属性，表示提交方式，可选GET和POST，默认是GET
    --->
    <form>
        <input type="text" name=