ajax 02

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)