2022/8/9 Ajax的初识学习

此为不带参数的get请求。先在html内做一个btn按钮，因为教程是2020年的所以前部分我用了es6语法，在get请求没接触过新语法故用jq语法进行get请求

document.querySelector('#btnGet').addEventListener('click',function (){
				$.get('http://www.liulongbin.top:3006/api/getbooks',function(res){
					console.log(res)
				})
			})

发起带参数的请求，get后的内容为选择id为第几位的图书，再加一个回调函数

document.querySelector('button').addEventListener('click',function(){
				$.get('http://www.liulongbin.top:3006/api/getbooks',{id:1},function(res){
					console.log(res)
				})
			})

post请求添加，大同小异

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

ajax比较全能，比上俩多快了type属性才指定功能，后面都一样的道理

document.querySelector('button').addEventListener('click',function () {
				$.ajax({    //记住({})
					type : 'GET' ,//大小写都可以
					url : 'http://www.liulongbin.top:3006/api/addbook',
					data : {
						id:1
					},
					success : function (res) { //记住最后回调函数前加success
						console.log(res)
					}
				})
			})
---------------------------------------------------------------------------------
document.querySelector('button').addEventListener('click',function () {
				$.ajax({
					type : 'POST', 
					url : 'http://www.liulongbin.top:3006/api/addbook',
					data: {
						bookname: '水浒传',
                        author: '施耐庵',
                        publisher: '上海图书出版社',
						},
					success: function (res){
						console.log(res)
					}
				})
			})
			

做了几个ajax的教程例子，但是因为接口不能用了没有调试出来，根据给的源码参照写了下，不会的替换了，感觉JSON.str的位置应该放错了，在放下一点也许是对的。但后台没报错

function Getdata () {
				JSON.stringify($.get('https://xl.xilinglaoshi.com:8001/fenshou',function(res){
					console.log(res)
			document.querySelector('#c').innerHTML = res.data[0]		
				}))
			}
            document.querySelector('#btn').addEventListener('click',function(){
				Getdata()
			})
		    window.onload = function (){
				Getdata()
			}

利用JQ通过ajax获得图书数据，应该是没怎么接触过JQ导致语法不熟悉，试了几遍都不能回传数据，作罢，用了源码。

 $(function () {
        // 获取图书列表数据
        function getBookList() {
          $.get('http://www.liulongbin.top:3006/api/getbooks', function (res) {
            if (res.status !== 200) return alert('获取数据失败！')
  
            let 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(){
            //this的指向是类名为del的a标签,attr是获取并且返回
            // //获取tbody做监听 del是在js里添加的a标签删除作用，因为在html内没有出现所有只能用代理事件来解决获取删除这个问题。a是动态创建出来的，获取动态创建的内容需要用代理的方式
            let id = $(this).attr('data-id')
            $.get('http://www.liulongbin.top:3006/api/delbook',{id:id},function(res){
                if (res.status!=200) return alert('删除失败')
                getBookList()
            })
        })
        $('#btn').on('click', function () {
        var bookname = $('#idBookname').val().trim()
        var author = $('#idtanthor').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()
               $('#idBookname').val('')
               $('#idtanthor').val('')
               $('#publisher').val('')

               
         }
        
        )

        })
    
     })