Ajax 页面ajax渲染 js 模板字符串使用 JS 实现sibling()

最新推荐文章于 2023-04-14 17:36:00 发布

kjshuan

最新推荐文章于 2023-04-14 17:36:00 发布

阅读量459

点赞数

分类专栏： JavaWeb 文章标签： Ajax

本文链接：https://blog.csdn.net/just_learing/article/details/124243481

版权

JavaWeb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

jsp 页面ajax渲染

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<table>
<tr id="t1">
<th>图书名称</th>
<th>图书作者</th>
<th>购买时间</th>
<th>图书分类</th>
<th>操作</th>
</tr>






</table>


</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
queryAll();
function del(id) {
	var isok = confirm("确认要删除吗");
	if(isok){
		$.ajax( {
		    "url"            :  "del",                      // 要提交的URL路径
		    "type"         :  "get",                     // 发送请求的方式
		    "data"         :  {"id":id},                      // 要发送到服务器的数据
		    "dataType" :  "text",                   // 指定传输的数据格式
		    "success"  :  function(result) {      // 请求成功后要执行的代码
			   queryAll();
		    	
		    },
		     "error"       :  function() { 
		    	alert("网络正忙");
			     }
		} );
	}else{
		return;
	}
	
}
function  queryAll() {

	$.ajax( {
	    "url"            :  "queryAll",                      // 要提交的URL路径
	    "type"         :  "get",                     // 发送请求的方式
	    "data"         :  {},                      // 要发送到服务器的数据
	    "dataType" :  "json",                   // 指定传输的数据格式
	    "success"  :  function(result) {  // 请求成功后要执行的代码
	    	var temp="";
	    
	    	for ( var bm in result) {
	    		
	    		 temp += `
	    		 <tr>
		    		<td>\${result[bm].name}</td>
		    		<td>\${result[bm].author}</td>
		    		<td>\${result[bm].timeStr}</td>
		    		<td>\${result[bm].typeStr}</td> //属性可不写  底层调用的是它的get方法
		    		<td><a  href="javascript:;" style="text-decoration: none"  onclick="del(\${result[bm].id})">删除</a></td>  
		    		</tr>`
			}
	    	  $("#t1").siblings().remove();
		   $("#t1").after(temp);
	    },
	     "error"       :  function() { 
	    	 // 请求失败后要执行的代码
		     }
	} );
	
	
	
	
	
	
}




</script>


</html>

因为是${}会和 EL表达式冲突需要加上\ 转义字符

一、使用连接符 + 把想要连接的字符串串起来
let shy = '帅哥'
let a = '你是' + shy
console.log(a) // 你是帅哥
1
2
3
二、数组api join拼接
let arr = ['hello','java','script']
let str = arr.join("")
console.log(str) // hellojavascript
// join('--') 这个是可以换的换--就是用--拼接
1
2
3
4
三、末班字符串俩 ` 拼接
let a = 'java'
let b = `hello ${a}script`
console.log(b) // hellojavascript
1
2
3
四、使用 js的 concat() 方法连接字符串
concat() 方法用于连接两个或多个数组或者字符串。
该方法不会改变现有的数组，而仅仅会返回被连接的新数组。
字符串就会拼接在一起

let a = ['java']
let b = ['script']

let str = a.concat(b)
console.log(str) // ["java", "script"]
1
2
3
4
5
let a = 'a'
let b= 'b'
console.log(a.concat(b)) // ab

实体类

package entity;

import java.text.SimpleDateFormat;
import java.util.Date;

public class BookManage {
	private Integer Id;
	private String  name;
	private String  author;
	private Date    time;
//	private String    timeStr;  属性可不写  底层调用的是它的get方法
	private Integer type;
//	private String typeStr;
	public String getTypeStr() {
		switch (type) {
		case 1:
			
			return "计算机/软件";
		case 2:
			
			return "小说/文摘";
		case 3:
	
			return "杂项";

			default:
			return "未知";
		}
		
		
		
	}
	public Integer getId() {
		return Id;
	}
	public void setId(Integer id) {
		Id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getAuthor() {
		return author;
	}
	public void setAuthor(String author) {
		this.author = author;
	}
	public Date getTime() {
		return time;
	}
	public void setTime(Date time) {
		this.time = time;
	}
	public Integer getType() {
		return type;
	}
	public void setType(Integer type) {
		this.type = type;
	}
	public BookManage(Integer id, String name, String author, Date time, Integer type) {
		super();
		Id = id;
		this.name = name;
		this.author = author;
		this.time = time;
		this.type = type;
	}
	public BookManage() {
		super();
		// TODO Auto-generated constructor stub
	}
	@Override
	public String toString() {
		return "BookManage [Id=" + Id + ", name=" + name + ", author=" + author + ", time=" + time + ", type=" + type
				+ "]";
	}
	public String getTimeStr() {
		SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
		String format = simpleDateFormat.format(time);
		
		return format;
	}
	

}