當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Ajax — 图书管理

發(fā)布時間：2023/12/13 编程问答 17 豆豆

生活随笔收集整理的這篇文章主要介紹了 Ajax — 图书管理小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

注意：本項目基于 jQuery 文件下進行的 Ajax 請求項目，需要映入jQuery文件！

<body style="padding: 15px;"><div class="panel panel-primary"><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="iptBookname" placeholder="請輸入書名"></div><div class="input-group"><div class="input-group-addon">作者</div><input type="text" class="form-control" id="iptAuthor" placeholder="請輸入作者"></div><div class="input-group"><div class="input-group-addon">出版社</div><input type="text" class="form-control" id="iptPublisher" placeholder="請輸入出版社"></div><button id="btnAdd" class="btn btn-primary">添加</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> //自己去相關(guān)的官網(wǎng)下載 bootstrap.css文件和 jQuery 文件引入<link rel="stylesheet" href="./lib/bootstrap.css" /><script src="./lib/jquery.js"></script> <script>// 全部修改為 $.ajax 表達(dá)進行輸入顯示// ------------------- 獲取并展示書籍 -----------------------getBooks();function getBooks(){$.ajax({type:'GET',url: 'http://www.liulongbin.top:3006/api/getbooks',success: function (res) {if(res.status === 200){let str = '';res.data.forEach(item => {str += `<tr><td>${item.id}</td><td>${item.bookname}</td><td>${item.author}</td><td>${item.publisher}</td><td><a data-id="${item.id}" class="delete" href="javascript:;">刪除</a> </td></tr>`;});$('#tb').html(str);}}})}// ------------------ 刪除書籍 ------------------------$('body').on('click', '.delete', function () {if (!confirm('你確定要刪除嗎？你好狠！')) {// 用戶點擊了取消，阻止代碼向后執(zhí)行return;} // 獲取每個書籍的id值let id = $(this).attr('data-id');$.ajax({type:'GET',url:'http://www.liulongbin.top:3006/api/delbook',data:{id:id},success :function(res){// 無論成功還是失敗，反正都要提示，干脆，不用判斷，直接提示alert(res.msg);if(res.status === 200){getBooks();}} })}); // ------------------ 添加書籍 ------------------------$('#btnAdd').on('click', function () {// 2. 獲取輸入框的值（三個值書名、作者、出版社）let bookname = $('#iptBookname').val().trim();let author = $('#iptAuthor').val().trim();let publisher = $('#iptPublisher').val().trim();// 3. 判斷，三個值不能是空if (bookname == '' || author == '' || publisher == '') {alert('參數(shù)不能為空');return;}$.ajax({type: 'POSt',url: 'http://www.liulongbin.top:3006/api/addbook',data:{bookname: bookname, author: author, publisher: publisher },success : function(res){alert(res.msg);// 5. 添加成功之后，從新渲染if (res.status === 201) {getBooks();}}});});</script>

實現(xiàn)效果：

總結(jié)

以上是生活随笔為你收集整理的Ajax — 图书管理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

Ajax
图书