纯servlet+AJAX+JSON写查询发布到页面

最新推荐文章于 2022-03-27 19:39:25 发布

深海浩

最新推荐文章于 2022-03-27 19:39:25 发布

阅读量218

点赞数

分类专栏： Java Date servlet 文章标签： servlet 用servlet+AJAX+JSON完成前端和后端的交互 servlet查询数据库中的数据显示在前端中

本文链接：https://blog.csdn.net/qq_40297463/article/details/100066843

版权

Java 同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

Date

3 篇文章 0 订阅

订阅专栏

servlet

3 篇文章 0 订阅

订阅专栏

用框架久了这种纯servle反而不会写了，我感觉这个还是要用会的必要！先记录起来，之后回看也好还有一些需要注意的地方！
前端代码，不怎么好看哈，测试用的：

<html>
<script type="text/javascript">

window.onload=function(){
    getAll();
    
}
function getAll(){
	var xhr=new XMLHttpRequest();
	xhr.open("get","get.do",true);
	xhr.send();
	
	xhr.onreadystatechange=function(){
		
		 if(xhr.readyState==4 && xhr.status==200){
			//接收service传来的json数据
			 var userInfo=xhr.responseText;
			//转为js中的json对象
			 var obj=JSON.parse(userInfo);
			 //对obj进行遍历
			 for(var i=0;i<obj.length;i++){
				 var id=obj[i].id;
				 var age=obj[i].age;
				 var sex=obj[i].sex;
	           //创建一个tr节点
	             var tr=document.createElement("tr");
	            
	             //创建一个td节点；insertCell()不懂的可以百度一下；
	            var tdId=tr.insertCell();
	            //将id加入进去，
	             tdId.innerHTML=id;
	             
	            var tdAge=tr.insertCell();
	            tdAge.innerHTML=age;
	             
	            
	             var tdSex=tr.insertCell();
	             tdSex.innerHTML=sex;

	             var tdD=tr.insertCell();
	              tdD.innerHTML="<a href='del?id="+id+"'>删除</a>";

		         var tdSe=tr.insertCell();
		         tdSe.innerHTML='<button >修改</button>';

		             tr.appendChild(tdId);
		             tr.appendChild(tdAge);
		             tr.appendChild(tdSex);
		             tr.appendChild(tdD);
		             tr.appendChild(tdSe);
		             //获得table的us
		             var us=document.getElementById("us");
		             //将tr添加进去
		             us.appendChild(tr);  
			 }
		 }
	}
}
</script>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <table border="1" cellpadding="5px"  cellspacing="5px" id="us">
 
    <tr>
        <th>ID</th>
        <th>性别</th>
        <th>年龄</th>
        <th>删除</th>
        <th>修改</th>
    </tr>
       
   </table>
   <a href="add.html">注册</a>
</body>
</html>

//在web.xml中配置，

<servlet>
		<servlet-name>myServlet03</servlet-name>
		<servlet-class>com.web.zrh.MyServlet03</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>myServlet03</servlet-name>
		<url-pattern>/get.do</url-pattern>
	</servlet-mapping>

import java.io.IOException;
import java.rmi.ServerException;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class MyServlet03 extends HttpServlet{
//切记service一定要写对，不然会报405的错误，“s”是小写。
//本人因为这个问题查了好久，很难受的，命名要规范呀就体现出来了
	public void service(HttpServletRequest request,HttpServletResponse response)
			throws ServerException,IOException{
	
	String url="jdbc:mysql://localhost:3306/day17aql";
	String user="root";
	String pwd="123456";
	List<String> users=null;
	try {
	//这是加载jdbc，连接数据库，我剧直接写了，这样好看些
		Class.forName("com.mysql.jdbc.Driver");
		
		Connection conn=DriverManager.getConnection(url,user,pwd);
		String sql="select id,age,sex from user";
		//预编译，防止SQL恶意注入！
		PreparedStatement pst=conn.prepareStatement(sql);
		ResultSet rs=pst.executeQuery();
		users=new ArrayList<String>();
		
		/* * "{'id':1,'name':'javaee','atus':"
			+ "[{'id':101,'name':'小红','age':16}]}";*/
		while(rs.next()){
			String id=rs.getString(1);
			
			int age=rs.getInt(2);
		
			String sex=rs.getString(3);
			/*拼接一个json样式，不然前端接收不了，
			之后使用框架就不用拉！*/
			String usered="
{\"id\":\""+id+"\",\"age\":"+age+",\"sex\":\""+sex+"\"}";
			
			users.add(usered);
		}
		
	} catch (ClassNotFoundException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	} catch (SQLException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
	//记得传到前端要解码，设置为utf-8
	response.setContentType("text/html;charset=utf-8");
	//将数据传入前端就OK了
	response.getWriter().println(users);

}
}