JQuery下的数据交互

​
​

活动地址：CSDN21天学习挑战赛

1、通过JQuery实现数据交互

浏览器中提供的XMLHttpRequst用法比较复杂 ，因此 JQuery中封装XMLHttpRequst 提供了 一系列的Ajax相关的函数

再JQuery中发起Ajax中最常用的三个方法

$.get() 用于从服务器中获取数据

$.post() 用于从服务器中提交

$.ajax() 既可以提交数据也可以获取数据

2、$,get()函数语法

$.get(url,[data],[callback])

参数名	参数类型	是否必选	说明
url	string	必选	要请求的地址
data	object	可选	请求资源所携带参数
callback	function	可选	请求成功时所执行的回调函数

代码如下

<script>
    btn_1=$('button').eq(0)
    btn_1.click(function () {
    url="http://www.liulongbin.top:3006/api/news"
    $.get(url,function (result) {
        for (let argument of result.data) {
            console.log(argument)
        }
    })
    })
</script>

3、$.post()函数语法

$.get(url,[data],[callback])

参数名	参数类型	是否必选	说明
url	string	必选	要请求的地址
data	object	可选	要提交的参数
callback	function	可选	请求成功时所执行的回调函数

// 发起登录请求

<script>
   login_btn=$('button').eq(0)
   login_btn.click(function () {
       let UserName=$('#UserName').eq(0).val()
       let UserPwd=$('#UserPwd').eq(0).val()
       console.log(UserName)
       console.log(UserPwd)
       // 发起post请求
       let Url="https://api.apiopen.top/api/login"// 请求地址
       $.post(Url,{
           "account": UserName,
               "password": UserPwd
       },(result)=>{
           console.log(result.message)
       } )
   })
</script>

4、$.ajax()函数的语法

该函数JQuery中一个比较综合的函数，它允许我们对Ajax请求进行更详细的配置

<script>
   $.ajax({
       type:"请求类型",
       url:"请求地址",
       data:{请求要携带的类容或要提交的数据},
       success:function(res){请求成功后回调的函数}
   })
</script>

1、通过$.ajax()函数发起get请求

只需将type 属性的值修改成get即可

btn=$(".btn").eq(0)
btn.click(function () {
    $.ajax({
        type:"get",
        url:"https://api.apiopen.top/api/sentences",
        data:{},
        success:function (res) {
            console.log(res)
            resl=res.result
            alert(resl.from+" "+resl.name)
        }
    })
})

2、通过$.ajax()函数发起post请求

只需将type 属性的值修改成post即可

btn=$('button').eq(0)
btn.click(function () {
    $.ajax({
        type:"post",
        url:"http://www.liulongbin.top:3006/api/addbook",
        data:{
            bookname:"书名aaa",
            author:"作者bbbb",
            publisher:"出版社cccc"
        },
        success:(res)=>{
            console.log(res)
        }
    })
})

5、接口

1、接口概念

使用Ajax请求数据时，被请求的URL地址就叫做数据接口（简称接扣)

同时每个接口必须有请求方式GET/POST

接口请求过程

用户通过与网页进行交互 希望向服务器提交数据/获得数据

然后就通过Ajax这个对象向服务器发起get/post数据请求

服务器会将处理结果响应给用户

然后网页将会把响应的数据进行填充

2、接口文档

接口文档：顾名思义就是接口的说明文档，他是我们调用接口的依据

好的接口文档包含了对 接口Url 、参数、输出内容的说明

我们参照接口文档就能够方便知道接口的作用，以及接口如何进行调用

接口文档的组成部分

一个合格的接口文档应有一下六个内容

1、接口名称

用来标识各个接口的简单说明，如登录接口、获取图书列表接口等

2、接口Url

接口调用的地址

3、调用方式

接口的调用方式get或者Post

4、参数格式

接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明这四个内容

5、响应格式

接口的返回值详细描述，一般包含数据名称，数据类型，说明 这三给内容

6、返回示例（可选）

通过对象形式，举例服务器返回的数据结构

​