ajax示例

最新推荐文章于 2024-11-07 07:00:00 发布

采采茶

最新推荐文章于 2024-11-07 07:00:00 发布

阅读量98

点赞数

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

本文链接：https://blog.csdn.net/weixin_44251024/article/details/85238673

版权

前端专栏收录该内容

4 篇文章 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);
	})
}