Ajax使用

笑傲code

已于 2022-07-02 10:35:20 修改

阅读量127

点赞数

分类专栏：前端文章标签： ajax python 前端

于 2022-06-30 16:07:00 首次发布

本文链接：https://blog.csdn.net/weixin_41472455/article/details/125542550

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Ajax

简介
接口

简介

ajax全称：异步javaScript 和 XML
作用: 实现网页和 服务器之间的数据交互
jQuery 中的Ajax：浏览器提供的 XMLHttpRequest 用法复杂，所以 jQuery 对其进行封装。降低了Ajax的使用难度

jQuery 中发起Ajax请求最常用的三个方法

$.get()
$.post()
$.ajax()

$.get()

$.get(url,[data],[callback])  // 三个参数， url ：要请求的地址， data：请求资源需要带的参数 ，callback 请求成功时的回调函数

使用$.get()函数发起不带参数的请求

$.get('url',function(res) {
	console.log(res) // 这里的res 是服务器返回的数据
})

案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
<!--  <script src="./lib/jquery.js"></script>-->
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
  </script>
</head>

<body>
  <button id="btnGET">发起不带参数的GET请求</button>

  <script>
    $(function () {
      $('#btnGET').on('click', function () {
        $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
          console.log(res)
        })
      })
    })
  </script>
</body>

</html>

使用$.get()函数发起带参数的请求

 $(function () {
     $('#btnGETINFO').on('click', function () {
       $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function (res) {
         console.log(res)
       })
     })
   })

$.post()函数语法

$.post(url,[data],[callback])  // 三个参数， url ：要请求的地址， data：请求资源需要带的参数 ，callback 请求成功时的回调函数

使用post提交数据

 $(function () {
   $('#btnPOST').on('click', function () {
     $.post('http://www.liulongbin.top:3006/api/addbook', { bookname: '水浒传', author: '施耐庵', publisher: '天津图书出版社' }, function (res) {
       console.log(res)
     })
   })
 })

$.ajax()

jQuery 中的$ajax()是一个功能比较综合的函数，相比 $.get()和 $.post(),它允许更详细的配置

$.ajax({
	type:'', // 请求的方法，GET或POST
	url:'',  // 请求的URL地址
	data:{}, // 这次请求要携带的数据
	success:function(res) {} // 请求成功之后的回调函数	
})

$.ajax() 发起GET请求

 $(function () {
   $('#btnGET').on('click', function () {
     $.ajax({
       type: 'GET',
       url: 'http://www.liulongbin.top:3006/api/getbooks',
       data: {
         id: 1
       },
       success: function (res) {
         console.log(res)
       }
     })
   })
 })

$.ajax() 发起POST请求

$(function () {
    $('#btnPOST').on('click', function () {
      $.ajax({
        type: 'POST',
        url: 'http://www.liulongbin.top:3006/api/addbook',
        data: {
          bookname: '史记',
          author: '司马迁',
          publisher: '上海图书出版社'
        },
        success: function (res) {
          console.log(res)
        }
      })
    })
  })

接口

使用 Ajax 请求数据时，被请求的URL地址，就叫数据接口。
例如
http://www.liulongbin.top:3006/api/getbooks 获取图书列表的接口(get请求)
http://www.liulongbin.top:3006/api/addbook 添加图书的接口（post请求）
在这里插入图片描述