$.get、$.post 和 $.ajax

请求方式

  客户端请求服务器时,请求的方式有很多种,最常见的两种请求方式分别是 get 和 post 请求。

  get 请求

    get 请求通常用于获取服务器的资源(拿数据),例如根据 URL 地址,从服务器获取 HTML 文件、CSS 文件、数据资源等。

  post 请求

    post 请求通常用于向服务器提交数据(发送数据),例如登录时向服务器提交的登录信息、注册时向服务器提交的注册信息等。

$.get()

  jQuery 中 $.get() 函数的功能单一,专门用来发起 get 请求。语法:$.get( url, [data], [callback] )。

  参数

    1、url:要请求的资源地址,是必选的。

    2、data:请求资源带的参数,是可选的。

    3、callback:请求成功时的回调函数,是可选的。

  发起不带参数的请求

$(() => {
    $('#btn').on('click', () => {
      $.get('http://www.liulongbin.top:3006/api/getbooks', (res) => {
        console.log(res);
      })
    })
  })

  发起带参数的请求

 $(() => {
    $('#btn').on('click', () => {
      // 指定 URL                                            参数          回调函数
      $.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, (res) => {
        console.log(res);
      })
    })
  })

$.post()

  jQuery 中 $.post() 的功能单一,专门用来发起 post 请求,从而向服务器提交数据。

  语法:$.post(url, [data], [callback])。

  参数

    1、url:要提交数据的地址,必选项。

    2、data:要提交的数据,可选项。

    3、callback:数据提交成功时的回调函数,可选项。

  $.post()向服务器提交数据

复制代码
    $('#post').on('click', () => {
      $.post('http://www.liulongbin.top:3006/api/addbook', {
        bookname: '东游记',
        author: '南游记',
        publisher: '北游记'
      }, (res) => {
        console.log(res);
      })
    })
复制代码

$.ajax()

  相比于 $.get() 和 $.post() 函数,jQuery 中提供的 $.ajax() 函数,是一个功能比较综合的函数,它允许我们对 Ajax 请求进行更详细的配置。

  基本语法

    $.ajax({ type:' ', url:' ', data:' ', success:function( res ){  }  })

    type:请求的方式,如 get、post。

    url:请求的 URL 地址。

    data:这次请求要携带的数据。

    success:请求成功的回调函数。

  发送 get 请求
复制代码
  $(() => {
    $('#btn').on('click', () => {
      $.ajax({
        // 请求方式
        type: 'GET',
        // 请求地址
        url: 'http://www.liulongbin.top:3006/api/getbooks',
        // 请求参数
        data: {
          id: 2
        },
        // 请求成功后的回调函数
        success(res) {
          console.log(res);
        }
      })
    })
  })
复制代码

  发送 post 请求

复制代码
    $('#btn').on('click', () => {
      $.ajax({
        type: 'POST',
        url: "http://www.liulongbin.top:3006/api/addbook",
        data: {
          bookname: "东游记",
          author: "南游记",
          publisher: "北游记"
        },
        success(res) {
          console.log(res);
        }
      })
    })
复制代码

 

posted @   守鹤  阅读(537)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示