【jquery Ajax 】form 表单教学 + 评论案例
form 表单的基本使用 什么是表单表单在网页中主要负责数据采集功能，HTML 中的<form>标签，就是用于采集用户输入的信息，并通过<form>标签的提交操作，把采集到的信息提交到服务器端进行处理。
表单的组成部分三个基本组成部分
表单标签表单域表单按钮
<form>标签的属性<form>标签用来采集数据，<form>标签的属性则是用来规定如何把采集到的数据发送到服务器。
actionaction 属性用来规定当提交表单时，向何处发送表单数据。
action 属性的值应该是后端提供的一个 url 地址，这个 url 地址专门负责接受表单提交过来的数据。
当<form>表单未指定 action 属性值的情况下，action 的默认值为当前页面的 URL 地址。
当表单提交后，页面会跳转到 action 属性指向的地址。
targettarget 属性用来规定在何处打开 action 的 url
它的可选值有五个，默认情况下，target 的值是_self,表示在相同的框架中打开 action URL。
methodmethod 属性用来规定以何种方式把表单数据提交到 action URL。
它的可选值有两个，分别是 get 和 post。
默认的情况下，method 的值为 get，表示通过 URL 地址的形式，把表单数据提交到 action URL
注意：get 方式适合用来提交少量的，简单的数据。
post 方式适合用来提交大量的，复杂的，或包含文件上传的数据。
在实际开发中，<form>表单的 post 提交方式用的最多，很少用 get，例如登录，注册，添加数据等表单操作，都需要使用 post 方式来提交表单。
表单的同步提交以及缺点 什么是表单的同步提交通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交。
表单提交的缺点<form>表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差。<form>表单同步提交后，页面之前的状态和数据会丢失。如何解决表单同步提交的缺点
表单只负责采集数据，Ajax 负责将数据提交到服务器。
通过 Ajax 提交表单数据 监听表单提交事件<body><form action="/login" method="get" id="f1"><input type="text" name="user_name"><input type="password" name="password"><button type="submit">提交</button></form><script>(function () {('#f1').submit(function (e) {//阻止默认的跳转 e.preventDefault();})})</script></body>
快速获取表单中的数据 serialize（）函数 为了简化表单中数据的获取操作，jquery 提供了 serialize（）函数，可以一次性获取表单中所有的数据。
<form action="/login" method="get" id="f1"><input type="text" name="user_name"><input type="password" name="password"><button type="submit">提交</button></form><script>
结果是一个键值对字符串，键名是 name，键值是输入的值，不同的键值对之间用 &连接
所以 在使用这个函数时，一定要给所有表单添加 name 属性。
案例——评论列表 渲染 UI 结构<body style="padding: 15px;">
</body>
获取评论数据 文档请求的根路径
评论列表接口 URL： /api/cmtlist 调用方式： GET 参数格式：无响应格式：数据名称 数据类型 说明 status Number 200 成功；500 失败；msg String 对 status 字段的详细说明 data Array 评论列表+id Number 评论 Id+username String 评论人姓名+content String 评论内容+time String 评论时间 代码 function getCommenlist() {$.ajax({type: 'get',url: 'http://www.liulongbin.top:3006/api/cmtlist',success: function (res) {if (res.statue !== 200)return console.log('获取失败');}
将获取到的初始数据显示在页面上 代码<script>function getCommenlist() {.ajax({type: 'get',url: 'http://www.liulongbin.top:3006/api/cmtlist',success: function (res) {if (res.status !== 200)return console.log('获取失败');var rows = [].each(res.data, function (i, item) {var str = <li class="list-group-item"> <span class="badge" style="background-color: #5bc0de;">评论时间：${item.time}</span> <span class="badge" style="background-color: #5bc0de;;">评论名称：${item.username}</span> ${item.content} </li>rows.push(str)})$('#cmt-list').empty().append(rows)}
发表评论 文档发表评论接口 URL： /api/addcmt 调用方式： POST 参数格式：参数名称 参数类型 是否必选 参数说明 username String 是 评论人名称 content String 是 评论内容响应格式：数据名称 数据类型 说明 status Number 201 发表评论成功；500 请填写完整的评论信息； 501 执行 Sql 失败；msg String 对 status 字段的详细说明 修改 html 表单<div class="panel-body"><div>评论人</div><input type="text" class="form-control"><div>评论内容</div><textarea class="form-control"></textarea><button type="submit" class="btn-primary btn">发表评论</button></div>//外层 div 换成 form 表单//发表评论我们需要获取评论人和评论内容所以我们可以给他添加一个 name 属性//name 属性 要与文档接口 对应<form class="panel-body" id="formAddCmt"><div>评论人</div><input type="text" class="form-control" name="username"><div>评论内容</div><textarea class="form-control"></textarea name="content"><button type="submit" class="btn-primary btn">发表评论</button></form>
代码('#formAddCmt').submit(function (e) {e.preventDefault();//decodeURIComponent 解码var data = decodeURIComponent((this).serialize())console.log(data);.ajax({type: 'post',url: 'http://www.liulongbin.top:3006/api/addcmt',data: data,success:function (res) {console.log(res);if (res.status !== 201)return alert('评论发布失败');getCommenlist()//转换成dom对象使用reset（）方法重置内容('#formAddCmt')[0].reset();}
还未添加个人签名 2022-10-14 加入
还未添加个人简介
评论