你首先要掌握的jQuery有关Ajax的入门知识

铃儿响叮当不响

于 2022-07-29 19:48:08 发布

阅读量203

点赞数

分类专栏： ajax笔记文章标签：前端 jquery ajax

本文链接：https://blog.csdn.net/qq_36507046/article/details/126062591

版权

ajax笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JQuery中的Ajax

浏览器中提供的XMLHttpRequest用法比较复杂，jQuery对XMLHttpRequest进行了封装，提供了一系列Ajax相关的函数，极大地降低了Ajax的使用难度。

Ajax的优点：

可以无需刷新页面就与服务器端进行通信
允许你根据用户事件来更新部分页面的内容

Ajax的缺点：

没有浏览历史，不能回退
存在跨域问题（同源）
SEO（搜索引擎优化）不友好

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

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

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

jQuery中$.get()函数的函数功能单一，专门用来发起get请求，从而将服务器上的资源请求到客户端来进行使用。

语法：$.get(url,[data],[callback])

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

用$.get()函数发起不带参数的请求时，直接提供请求的URL地址和请求成功之后的回调函数即可.

$(function(){

$('#btn_get').on('click',function(){

$.get('http://www.liulongbin.top:3006/api/getbooks',function(res){

console.log(res) // 这里的res是浏览器返回的数据

})

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

$.get('http://www.liulongbin.top:3006/api/getbooks',{id: 1},function(res){

console.log(res) // 这里的res是浏览器返回的数据

})

$.post()函数的语法

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

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

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

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

<button id="btn_post">发起POST请求</button>

$(function(){

$('#btn_post').on('click',function(){

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

console.log(res)

})

</script>

$.ajax()函数的语法

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

$.ajax({

type : ‘ ’ // 请求的方式如：GET 或者 POST

url : ‘ ’ // 请求的URL地址

data : ‘ ’ // 这次请求要携带的数据

success: function(res){ } // 请求成功后的回调函数

})

用$.ajax()发起GET请求时，只需要将type属性的值设置为GET即可

$(function(){

$('#btn_get').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请求时，只需要将type属性的值设置为POST即可

$('#btn_post').on('click',function(){

$.ajax({

// 请求的方式

type: 'POST' ,

//请求的url地址

url: 'http://www.liulongbin.top:3006/api/addbook',

data:{// 要提交给服务器的数据

bookname:'史记',

author:'司马迁',

publisher:'上海图书出版社'

success:function(res){// 请求成功后的回调函数

console.log(res)

}

jQuery-Ajax图书信息表案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap.css">
    <script src="./lib/jquery.js"></script>
</head>
<body style="padding: 20px;">
    <!-- 添加图书馆的Panel面板 --> 
    <div class="panel panel-danger">
          <div class="panel-heading">
                <h3 class="panel-title">添加新图书</h3>
          </div>
          <div class="panel-body form-inline">  
                <div class="input-group">
                    <div class="input-group-addon">书名</div>
                    <input type="text" class="form-control" id="bookname" placeholder="请输入书名">
                </div>
                <div class="input-group">
                    <div class="input-group-addon">作者</div>
                    <input type="text" class="form-control" id="author" placeholder="请输入作者">
                </div>
                <div class="input-group">
                    <div class="input-group-addon">出版社</div>
                    <input type="text" class="form-control" id="publisher" placeholder="请输入出版社">
                </div>
                <button id="btnAdd" class="btn btn-danger">添加</button>
          </div>
    </div>
    <!-- 图书列表 -->
    
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>id</th>
                <th>书名</th>
                <th>作者</th>
                <th>出版社</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tb">
        </tbody>
    </table>
    
    <script>
        $(function(){
           // 获取图书列表数据
           function getBookList(){
            $.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
                    if(res.status !== 200){
                       return alert('获取数据失败')
                    }
               // 定义一个空数组
               var rows = [] 
               // 循环拼接字符串
               $.each(res.data,function(i, item){
                rows.push('<tr><td>'+item.id+'</td><td>'+item.bookname+'</td><td>'+item.author
                    +'</td><td>'+item.publisher+'</td><td><a href="javascript:;" class="del" data-id="'+item.id+'">删除</a></td></tr>')
                $('#tb').empty().append(rows.join(''))// 渲染表格结构
                })
               }
            )}
           getBookList()

         // 删除图书
        // 用代理的方法为动态添加的元素绑定点击事件 通过父节点
        $('tbody').on('click','.del',function(){
            var id = $(this).attr('data-id')
            $.get('http://www.liulongbin.top:3006/api/delbook', {id: id}, function(res){
                  if(res.status !== 200){
                     return alert('删除失败')
                  }
                  getBookList()
            })
         })

         // 添加图书
         $('#btnAdd').on('click',function(){
             var bookname = $('#bookname').val().trim()
             var author = $('#author').val().trim()
             var publisher = $('#publisher').val().trim()
             if(bookname.length <= 0 || author.length <= 0 || publisher.length <= 0){
                  return alert('请填写完整的图书信息')
             }
        $.post('http://www.liulongbin.top:3006/api/addbook',{bookname: bookname, author: author, publisher: publisher},function(res){
                if(res.status !== 201){
                     return alert('添加失败')
                  }
                  getBookList()
                 // 把输入文本框列表清空
                 $('#bookname').val('')
                 $('#author').val('')
                 $('#publisher').val('')
              })
           })
        })
    </script>  
</body>
</html>

本笔记来源于b站黑马程序员视频，如有帮助请路过点个赞，谢谢！附上链接

https://www.bilibili.com/video/BV1ZS4y1w7Yz?p=16&share_source=copy_web

铃儿响叮当不响

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
你首先要掌握的jQuery有关Ajax的入门知识

浏览器中提供的XMLHttpRequest用法比较复杂，jQuery对XMLHttpRequest进行了封装，提供了一系列Ajax相关的函数，极大地降低了Ajax的使用难度。Ajax的优点：可以无需刷新页面就与服务器端进行通信允许你根据用户事件来更新部分页面的内容，Ajax的缺点：没有浏览历史，不能回退存在跨域问题（同源）SEO（搜索引擎优化）不友好。jQuery中发起Ajax请求最常用的三个方法如下$.get()$.post()$.ajax()。...
复制链接

扫一扫