网站流量突然增大,网站开发系统架构图,wordpress mingle,做汽车售后的网站Ajax#xff1a;请求 响应 AjaxjQuery的Ajax接口$.get$.post$.ajax PostMan 接口测试getpost Ajax 浏览器中看到的数据#xff0c;并不是保存在浏览器本地的#xff0c;而是实时向服务器进行请求的。当服务器接收到请求#xff0c;就会发回一个响应#xff0c;此时浏… Ajax请求 响应 AjaxjQuery的Ajax接口$.get$.post$.ajax PostMan 接口测试getpost Ajax 浏览器中看到的数据并不是保存在浏览器本地的而是实时向服务器进行请求的。当服务器接收到请求就会发回一个响应此时浏览器就可以从响应中拆解出网页的内容。
在基础的HTML CSS JavaScript的架构中做出的网页都是没有与服务器发生交互的静态网页。如果想要请求服务器上的数据达到实时渲染网页的效果就要用到XMLHttpRequest对象完成数据的请求而使用这个对象与服务器进行数据传输就称为Ajax。
这个XMLHttpRequest是由浏览器原生提供的JavaScript对象其用法比较复杂。使用jQuery封装的Ajax接口会降低使用难度。 jQuery的Ajax接口
$.get
jQuery的$.get()方法用于发起get请求获取服务器的信息。
语法
$.get(url, data, callback)参数
url请求的资源地址data请求期间携带的参数可选参数callback请求成功时触发的回调函数可选参数
使用以下网址测试接口
https://jsonplaceholder.typicode.com/在这个网址的/post下有很多json数据 可以通过Ajax请求这些数据。
示例
button idGETget/button
script$(function () {$(#GET).on(click, function () {$.get(https://jsonplaceholder.typicode.com/posts, function (res) {console.log(res)})})})
/script这里定义了一个按钮并且绑定事件只要点击按钮就发送一个请求回调函数中res参数会得到请求的返回值并输出到控制台。 得到了一个数组数组内有100个json对象说明请求成功了。
如果不希望一次性拿到这么多数据可以加上参数
button idGETget/button
script$(function () {$(#GET).on(click, function () {$.get(https://jsonplaceholder.typicode.com/posts, {id: 2}, function (res) {console.log(res)})})})
/script第二个参数是一个对象对象内包含了请求的参数列表id:2表示请求id2的数据。 这次就只请求到了一条数据id2。 $.post
jQuery的$.post()方法用于发起post请求给服务器提交数据。
语法
$.post(url, data, callback)参数
url发送的资源地址data发送期间携带的参数可选参数callback发送成功时触发的回调函数可选参数
这三个参数的用法与post一致如果往之前的https://jsonplaceholder.typicode.com/posts发送post请求那么发送出去的数据是什么这个服务器就会返回什么。
示例
button idPOSTpost/button
script$(function () {$(#POST).on(click, function () {$.post(https://jsonplaceholder.typicode.com/posts, {postId: 1,body: 112233},function (res) {console.log(res)})})})
/script这个代码向服务器发送一个数据就是第二个参数里面的对象最后输出返回结果到控制台。
输出值 最后返回了一个和发送出去的对象一样的内容除了发送出去的postId和body它还给这条消息分配了一个id:101。 $.ajax
$.ajax()是对get和post进行了一个综合一个接口可以实现多个功能。
语法
$.ajax({type: ,url: ,data: {},success: function(res) {}})参数
type请求的方式url请求的地址data本次请求携带的数据success请求成功触发的回调函数
此处要注意以上所有参数都包含在一个对象{}中。在type中可以指定get、post等请求方式。
之前发送的两个请求的$.ajax写法
$.ajax({type: GET,url: https://jsonplaceholder.typicode.com/posts,data: {id: 1},success: function (res) {console.log(res)}
})$.ajax({type: POST,url: https://jsonplaceholder.typicode.com/posts,data: {postId: 1111,body: 112233},success: function (res) {console.log(res)}
})此处的type值既可以大写也可以小写。 PostMan 接口测试
在先前的Ajax请求中url填入的地址称为接口。它一般是由后端提供的前端把收集到的信息发送给后端后端再把处理好的信息发回给前端渲染到页面上。
有的时候不确定后端提供的URL是否可以正常使用就需要进行接口测试最常用的工具就是PostMan。
get
测试get接口首先在顶部的栏目中选择GET随后输入要测试的接口地址 随后在下面的表格中填入参数 此处选择id: 1会发现上面的地址自动增加了?id1这个后缀其实get请求发出的参数就是通过追加在请求地址后面完成的。
最后点击send 在下方就可以得到发送回来的响应了右上角200 OK表示请求成功。 post
发送post请求与get请求略有不同。
首先左上角选中POST方法在栏目中填入要访问的地址在下面的表格中选择body在表格中填入携带的参数 可以看到post请求携带的参数没有通过?追加到url的末尾因为post的参数是保存在http请求的请求体内部而不是地址中。也是因此要在填入参数时选择body这个选项。
点击发送后可以看到响应结果 右上角201 create表示发送成功得到返回值并分配了一个id:101。
