JSP的AJAX請求

更新時間：2021-06-28 11:25:10 來源：動力節點瀏覽1161次

jsp頁面ajax請求判斷數據庫里是否存在用戶

配置yml：

然后在pom文件中加入jsp的必要依賴：

		<!-- 連接oracle數據庫的依賴 -->
		<dependency>
			<groupId>com.oracle</groupId>
			<artifactId>ojdbc6</artifactId>
			<version>11.2.0.3</version>
		</dependency>
		<!-- jsp必要依賴 -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
		</dependency>
		<dependency>
   			<groupId>org.apache.tomcat.embed</groupId>
   			<artifactId>tomcat-embed-jasper</artifactId>
		</dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>3.0-alpha-1</version>
            <scope>provided</scope>
        </dependency>

在/WEB-INF/jsp/目錄下創建jsp文件：(編碼改為utf-8)

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
</head>
<body>
	我是一個jsp頁面
</body>
</html>

創建controller：

項目運行：

引入jquery：(jsp的靜態資源不放在src/main/webapp下而是src/main/resources/static下)

修改頁面、編寫mapper、service、controller：

jsp頁面：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="js/jquery-1.8.3.js"></script>
<script>
	$(function(){
		$("#btn").click(function(){
			var ins=$("#ins").val();
			$.ajax({
  	  			url:"/r",//要請求的服務器url
  	  			data:{ins:ins},//第一個name對應的是后端request.getParameter("name")的name、第二個name對應的是此js中的var name = $("#name").val();的name
  	  			async:true,//是否是異步請求
  	  			cache:false,//是否緩存結果
  	  			type:"POST",//請求方式
  	  			dataType:"text",//服務器返回什么類型數據 text xml javascript json(javascript對象)
  	  			success:function(result){//函數會在服務器執行成功后執行，result就是服務器返回結果
  	  				console.log(result);	  
  	  				$("#re").html(result);			
  	  			},
  	  			error:function(jqXHR, textStatus, errorThrown) { 	  	   	 		
  	  	    	}
			});
		});
	});
</script>
</head>
<body>
	<input id="ins"/><br>
	<button id="btn">檢查判斷</button><br>
	<span id="re"></span>
</body>
</html>

看數據庫：

pojo：

public class User {
	private Integer id;
	private String name;
	private String job;
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getJob() {
		return job;
	}
	public void setJob(String job) {
		this.job = job;
	}
	@Override
	public String toString() {
		return "User [id=" + id + ", name=" + name + ", job=" + job + "]";
	}		
}

Mapper：

@Mapper
public interface UserMapper {
	@Select("select id,name,job from emp where name=#{name}")
	public List<User> queryOne(String name);
}

Service：

public interface UserService {
	public boolean queryOne(String name);
}

Controller：

@Controller
public class IndexC {
	@RequestMapping
	public String index() {
		return "index";
	}	
	@Autowired
	private UserServiceImp u;	
	@RequestMapping("/r")
	@ResponseBody
	public String r(String ins) {
		String s="";
		 boolean bb = u.queryOne(ins);		
		if(bb) {
			s="用戶存在";
		}else {
			s="用戶不存在";
		}
		return s;
	}
}

運行：