ajax示例

朴灿烈づ我的快乐病毒、 2022-04-10 04:15 248阅读 0赞

超级麻烦的党梁写法：

function getBookList(currentPage){
    	var qbookName = $("#qbookName").val();
    	var qtypeId = $("#qtypeId").val();
    	var startDate = $("#startDate").val();
    	var endDate = $("endDate").val();
    	
    	$.ajax({
    		async: false,
    		url:"BookServlet.do",
    		dataType:"json",
    		data:{
    			"option":"getBookList",
    			"qbookName":qbookName,
    			"qtypeId":qtypeId,
    			"startDate":startDate,
    			"endDate":endDate,
    			"page":currentPage
    		}
    	}).done(function(list){
    		var tableEle = $("#bookList");
    		//每次拼接前要移除tr？
    		tableEle.children().children(":gt(0)").remove();
    		for (var i in list){
    			var tr = $("<tr></tr>");
    			
    			var td1 = $("<td></td>");
    			var boxEle = $("<input/>");
    			boxEle.attr("type","checkbox");
    			boxEle.val(list[i].bookId);
    			td1.append(boxEle);
    			tr.append(td1);
    			
    			var td2 = $("<td></td>");
    			td2.html(list[i].bookId);
    			tr.append(td2);
    			
    			var td3 = $("<td></td>");
    			td3.html(list[i].bookName);
    			tr.append(td3);
    			
    			var td4 = $("<td></td>");
    			td4.html(list[i].typeName);
    			tr.append(td4);
    			
    			var td5 = $("<td></td>");
    			td5.html(list[i].author);
    			tr.append(td5);
    			
    			var td6 = $("<td></td>");
    			td6.html(list[i].publish);
    			tr.append(td6);
    			
    			var td7 = $("<td></td>");
    			td7.html(list[i].pubDate);
    			tr.append(td7);
    			
    			var td8 = $("<td></td>");
    			td8.html(list[i].stock);
    			tr.append(td8);
    			
    			var td9 = $("<td></td>");
    			var input_mod = $("<input type='button' value='修改' onclick='modifyBook(" + list[i].bookId + ")'/>");
    			td9.append(input_mod);
    			tr.append(td9);
    			
    			var input_del = $("<input type='button' value='删除' onclick='deleteBook(" + list[i].bookId + ")'/>");
    			td9.append(input_del);
    			tr.append(td9);
    			
    			tableEle.append(tr);
    		}
    	}).fail(function(){
    		alert("getbooklist ajax fail");
    	});
    }

陈氏写法：

//fenye显示图书信息
    function showBook(page, option, bookname, typeId, date1, date2){
    	$.ajax({
    		method:"POST",
    		dataType:"JSON",
    		url:"BookServlet",
    		data:{option:option, page:page, bookName:bookname,typeid:typeId,Date1:date1,Date2:date2}
    	}).done(function(list){
    		var str = "<tr>" +
    				"<td><input type='checkbox' name='deleteBox'  onclick='selectAll(this)'/>全选</td>" +
    				"<td>编号</td>" +
    				"<td>书名</td>" +
    				"<td>类型</td>" +
    				"<td>作者</td>" +
    				"<td>出版社</td>" +
    				"<td>出版日期</td>" +
    				"<td>库存</td>" +
    				"<td>操作</td>";
    		for (var i in list){
    			str += "<tr>" +
    			"<td><input type='checkbox' name = 'deleteBox' value = '" + list[i].bookId + "'/></td>" +
    			"<td>" + list[i].bookId + "</td>" +
    			"<td>" + list[i].bookName + "</td>" +
    			"<td>" + list[i].bookType.typeName + "</td>" +
    			"<td>" + list[i].author + "</td>" +
    			"<td>" + list[i].publish + "</td>" +
    			"<td>" + list[i].pubDate + "</td>" +
    			"<td>" + list[i].stock + "</td>" +
    			"<td>" +"<input type = 'button'  name = 'delete_btn' value='删除' onclick = 'deleteBook(" + list[i].bookId + ")'/>" +
    					"<input type = 'button'  name = 'delete_btn' value='修改' onclick = 'modifyBook(" + list[i].bookId +","+ list[i].typeid+")'/>" +
    			"</td>";
    		}
    		$("#bookTable").html(str);
    	})
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，248人围观）

还没有评论，来说两句吧...

相关阅读

相关 ajax前后端交互示例

文章目录一、前后端交互方法 1、Ajax前端示例 1.1 特点 1.2 ajax同域请求示例

分手后的思念是犯贱/ 2024年03月26日 10:59/ 0 赞/ 73 阅读

相关 Flask之ajax操作示例

\`文末包含源码\` python3.6，flask使用简例，目录结构 ![20190130151526593.png][] index2.html <ht

怼烎@/ 2023年10月18日 14:16/ 0 赞/ 76 阅读

相关 jQuery简单的Ajax调用示例

jQuery确实方便，下面做个简单的Ajax调用：建立一个简单的HTML文件： <!DOCTYPE HTML> <html> <head>

以你之姓@/ 2023年10月18日 10:19/ 0 赞/ 116 阅读

相关 Spring Boot Ajax示例

本文将向您展示如何使用`jQuery.ajax`将HTML表单请求发送到`Spring REST API`并返回JSON响应。使用的工具： 1. Spring Boo

左手的ㄟ右手/ 2023年02月15日 05:13/ 0 赞/ 49 阅读

相关 AJAX用法示例详解

1、简介 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一

野性酷女/ 2022年07月16日 09:51/ 0 赞/ 209 阅读

相关 JQuery ajax调用示例

function deleteRecipeDetail(id,recipeid) { if(confirm("确定要删除记录吗？"))

墨蓝/ 2022年06月18日 04:55/ 0 赞/ 244 阅读

相关 ajax示例

超级麻烦的党梁写法： function getBookList(currentPage){ var qbookName = $("qbookName").v

朴灿烈づ我的快乐病毒、/ 2022年04月10日 04:15/ 0 赞/ 249 阅读

相关 Ajax ModelPopu and Progress 示例学习

ModelPopu示例: 1.先创建一个ASP.NET WEB项目; 2.为项目中添加一个CSS文件,代码如下所示: .modalBackground {

我不是女神ヾ/ 2022年03月28日 03:40/ 0 赞/ 173 阅读

相关【JavaScript】------- JavaScript ajax封装示例代码

> 转载处：[https://www.qdfuns.com/article/49499/11ed812b75bd07fb1921c1a73c3aaf9d.html][https

末蓝、/ 2022年02月19日 13:05/ 0 赞/ 256 阅读

相关 jQuery 完整 ajax示例

$(function(){ //请求参数 var list = {}; //

忘是亡心i/ 2022年01月13日 06:05/ 0 赞/ 274 阅读