ajax 02
表单相关操作
表单应用场景
用户与网站的交互方式:基于表单提交数据
表单基本结构
form标签本身具有提交行为,默认提交方式是get
表单输入域
提交按钮
提交表单:输入域的name属性必须提供并且要与后台要求的名称匹配
- form标签的核心属性
- 1.action 表示提交的后台url地址
- 2.method 表示提交的方式
- 1)get 默认提交方式
- 2)post
<form action="http://www.liulongbin.top:3006/api/addbook" method="post">
<div>
图书名称:
<input type="text" name="bookname">
</div>
<div>
图书作者:
<input type="text" name="author">
</div>
<div>
图书出版社:
<input type="text" name="publisher">
</div>
<input type="submit" value="提交">
</form>
submit 类型默认有提交表单行为
button类型没有默认表单提交行为
如下是有表单的默认提交按钮的
提交
Form标签属性
action 提交到后端的地址,如果不写,默认表示当前页面
method 请求方式,支持get和post,默认是get方式
target 打开action地址的方式(服务器返回的结果在哪里显示)
_blank 表示打开一个新的页面
_self 表示在当前页面刷新(默认值)
enctype 发送数据的编码方式(设置前端提交给服务器的数据格式) 默认值application/x-www-form-urlencoded
bookname=abc&author=lisi&publisher=hello
用于文件上传 multipart/form-data
form常用类型标签
- 普通文本框 text
- 文件上传按钮 file
- 密码框 password
- 下拉选框 select
- 多行文本框 textarea
- 单选框 radio
- 多选框 checkbox
传统表单提交的问题与解决方法
表单页面在提交后会发生跳转,如何不跳转页面?
解决方法:使用Ajax方式提交表单
基于Ajax提交表单:
监听表单提交事件submit
阻止表单默认提交行为 e.preventDefault()
快速获取表单数据$(’#myform’).serialize()
<script>
$('#myform').submit(function (e) {
//阻止默认行为
e.preventDefault()
//一次性获取表单数据
let list = $(this).serialize()
//调用接口 把表单数据添加到数据库
$.post('http://www.liulongbin.top:3006/api/addbook', list, function (res) {
//调用成功
console.log(res);
})
})
</script>
使用
提交表单的方式 不用设置阻止默认行为
<input id="btn" type="button" value="提交">
$('#btn').click(function (e) {
// 控制表单提交
// e.preventDefault()
let params = $('#myform').serialize()
$.post('http://www.liulongbin.top:3006/api/addbook', params, function (res) {
console.log(res)
})
})
总结:基于Ajax提交表单的方式
1.使用click事件,该事件需要绑定在按钮上,此时推荐试用type=button的按钮
2.使用submit事件,该事件需要绑定到form表单上,此时推荐使用button按钮或者type是submit的按钮,需要阻止默认行为
关于表单数据的获取方式:
注意; 必须使用form标签的JQ实例对象调用seralize方法
发表评论案例
新闻或者博客文章底部一般都有评论功能
提供表单发表评论,评论列表展示
案例基本布局
<!-- 评论面板 -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">发表评论</h3>
</div>
<form class="panel-body" id="formAddCmt">
<div>评论人:</div>
<input type="text" class="form-control" name="username" autocomplete="off" />
<div>评论内容:</div>
<textarea class="form-control" name="content"></textarea>
<button type="submit" class="btn btn-primary">发表评论</button>
</form>
</div>
<!-- 评论列表 -->
<ul class="list-group" id="cmt-list">
<li class="list-group-item">
<span class="badge" style="background-color: #F0AD4E;">评论时间:</span>
<span class="badge" style="background-color: #5BC0DE;">评论人:</span>
Item 1
</li>
</ul>
获取评论列表数据并渲染到页面
页面加载时调用接口获取评论列表数据
//*********************************************获取评论列表数据并渲染到页面 查询数据
//获取列表的数据需要重复调用 需要封装函数 切记调用函数
function getComment() {
// 1.调用接口 查询数据库中的数据
$.get('http://www.liulongbin.top:3006/api/cmtlist', function (res) {
// 2.判断数据是否获取成功
if (res.status === 200) {
//获取成功
// 3.获取列表中的数据
let list = res.data
// 4.通过拼接字符串的方式,将数据渲染到页面
let Tag = ''
//循环遍历数据
$.each(list, function (index, item) {
Tag += ` <li class="list-group-item">
${item.content}
<span class="badge" style="background-color: #F0AD4E;">评论时间:${item.time}</span>
<span class="badge" style="background-color: #5BC0DE;">评论人:${item.username}</span>
</li>`
})
//将数据渲染到页面 找父级
$('#cmt-list').html(Tag)
}
})
}
getComment()
实现发表评论功能
- 绑定事件
- form表单元素绑定submit事件
- 按钮元素绑定click事件
- 获取表单数据提交到后台
//****************************************************************实现发表评论功能
//点击按钮发表评论
// 1.添加按钮监听事件 用form表单的submit提交方式来做
$('#formAddCmt').submit(function (e) {
//阻止submit的默认事件行为
e.preventDefault()
// 2.获取输入框的内容 form表单的一次性获取
let formData = $(this).serialize()
// 3.调用接口 将输入框的数据添加到数据库中
$.post('http://www.liulongbin.top:3006/api/addcmt', formData, function (res) {
//4.判断添加的数据是否添加成功 201
if (res.status === 201) {
//添加成功
//重新渲染到页面
getComment()
//清空输入框的值 用get或者[0]转换为原生对象,原生中有reset方法
$('#formAddCmt').get(0).reset()
} else {
alert(res.msg)
}
})
})
原生Ajax
原生Ajax基本用法
基本使用步骤get post 模板
- 创建xhr对象
- 调用xhr.open()方法准备参数
- 调用xhr.send()方法执行发送动作
- 监听xhr.onreadystatechange事件,用于获取服务器返回数据
<script src="./js/jquery-3.5.1.min.js"></script>
<script>
//1.创建xhr实例对象
let xhr = new XMLHttpRequest()
// 2.准备发送请求的相关参数
xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks')
// 3.执行发送请求的动作
xhr.send(null)
// 4.指定回调函数 用于处理服务器的返回
xhr.onreadystatechange = function () {
//该函数是服务器返回数据后触发,该方法不仅仅触发一次
if (xhr.readyState === 4 && xhr.status === 200) {
//如果上述两个条件都满足,就可以获取服务器的正常数据
//ret是普通字符串
let ret = xhr.responseText
console.log(ret);
console.log(typeof ret);
}
}
</script>
xhr对象详解-请求参数
get请求方式传参
url地址查询字符串方式传递参数
xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks?id=1&author=吴承恩')
let param = '?id=1&author=吴承恩'
// params = encodeURI(params)
xhr.open('get', 'http://www.liulongbin.top:3006/api/getbooks' + param)
url编码
** encodeURI() 编码函数
decodeURI() 解码函数**
let str = '何以琛'
let str1 = encodeURI(str)
console.log(str1)
let str2 = decodeURI('%E4%BD%95%E4%BB%A5%E7%90%9B')
console.log(str2)
post请求方式传参
必须设置请求头
必须在send方法调用前设置请求头
// 设置 Content-Type 属性
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 调用 send 函数
xhr.send('bookname=水浒传&author=施耐庵&publisher=上海图书出版社')
xhr对象详解-响应状态
readyState
如果该状态值为4表示服务器已经完全把数据返回了,此时可以获取后台的数据
仅仅表示数据已经得到,但是正确与否不确定
status
http协议的状态:如果status是200表示数据正常,否则表示数据不正常
// 考虑异常情况,需要用这种写法
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 成功获取服务器数据
let res = xhr.responseText
} else {
alert('服务器发生错误')
}
}
xhr对象详解-响应数据
数据格式分析
xml (类似于html格式,标签包裹数据)
缺点1:冗余数据比较多,不方便网络传输
缺点2:不方便前端解析
json(本质上是字符串,但是有规则) 解决XML的两个问题
JSON基本规则(JSON是字符串的一种格式)
数据结构为键值对 uname: ‘lisi’
key 必须是使用英文的双引号包裹的字符串 “uname”:“lisi”
字符串类型的值必须使用双引号包裹 “uname”:“lisi”
JSON 中不能写注释
JSON 的最外层必须是对象或数组格式
不能使用 undefined 或函数作为 JSON 的值
value 的数据类型可以是数字、字符串、布尔值、null、数组、对象6种类型
JSON格式转换(JSON和对象之间的关系)
对象转字符串 JSON.stringify()
字符串转对象 JSON.parse()
let jsonStr = '{"a": "Hello", "b": "world"}'
// 把JSON字符串转成对象
let obj = JSON.parse(jsonStr)
console.log(obj)
// 把对象转成JSON字符串
let obj2 = { a: 'hello', b: 'world', c: false }
let str = JSON.stringify(obj2)
console.log(str)
运行结果
Ajax返回的结果处理
hr.responseText本身是字符串
let obj = JSON.parse(xhr.responseText)