ajax接收后端数据

最新推荐文章于 2023-11-15 20:51:09 发布

Nuyoahll-_-ll

最新推荐文章于 2023-11-15 20:51:09 发布

阅读量2.2k

点赞数 2

分类专栏： java

本文链接：https://blog.csdn.net/qq_43566782/article/details/109906249

版权

java 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

案例：

页面放一个连接，当点击链接，向后端发送请求，最终显示到页面上。再次点击链接，信息隐藏。

效果：

demo.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	$(function() {
		//$("#show_content").hide();
		$("a").toggle(function() {
			var url="ShowStuServlet";
			$.post(url,function(data){
				var jsonObj=eval(data);
				//console.log(jsonObj);
				var tab=$("<table border='1'><tr><td>编号</td><td>姓名</td><td>学号</td><td>爱好</td></tr></table>");
				for(var i=0;i<jsonObj.length;i++){
					var obj=jsonObj[i];
					var tr=$("<tr><td>"+obj.id+"</td><td>"+obj.name+"</td><td>"+obj.sno+"</td><td>"+obj.hobby+"</td></tr>")
					tab.append(tr);
				} 
				//console.log(tab);
				$("#show_content").append(tab);
				$("#show_content").show();
			})
		},function(){
			$("#show_content").hide();
			$("#show_content").html("");
		})
	})
</script>
</head>
<body>
<a href="#">显示学生信息</a>
<div id="show_content" >

</div>
</body>
</html>

ShowStuServlet.java

package com.item.servlet;

import java.io.IOException;
import java.util.ArrayList;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSONObject;
import com.item.domain.Studen;

/**
 * Servlet implementation class ShowStuServlet
 */
@WebServlet("/ShowStuServlet")
public class ShowStuServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		Studen stu=new Studen();
		Studen stu2=new Studen();
		stu.setId(1);
		stu.setName("小明");
		stu.setSno("123456");
		stu.setHobby("篮球");
		
		stu2.setId(2);
		stu2.setName("小花");
		stu2.setSno("22222");
		stu2.setHobby("足球");
		ArrayList<Studen>arr=new ArrayList<Studen>();
		arr.add(stu);
		arr.add(stu2);
		//System.out.println(arr);
		response.getWriter().print(JSONObject.toJSONString(arr));
	}

	/**
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

接下来通过查询数据库得到数据返回

ShowStuServlet.java

package com.item.servlet;

import java.io.IOException;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSONObject;
import com.item.dao.StudentDao;
import com.item.domain.Studen;

/**
 * Servlet implementation class ShowStuServlet
 */
@WebServlet("/ShowStuServlet")
public class ShowStuServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		StudentDao studao=new StudentDao();
		List<Studen> list;
		try {
			list = studao.getStu();
			response.getWriter().print(JSONObject.toJSONString(list));
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

	/**
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

StudentDao.java

package com.item.dao;

import java.sql.SQLException;
import java.util.List;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import com.item.domain.Studen;
import com.item.utiles.C3P0Utiles;

public class StudentDao {
	public List<Studen> getStu() throws SQLException{
		QueryRunner queryRunner=new QueryRunner(C3P0Utiles.getDataSource());
		String sql="select * from test";
		List<Studen>list=queryRunner.query(sql,new BeanListHandler<>(Studen.class));
		return list;
	}
}

效果：

Nuyoahll-_-ll

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
ajax接收后端数据

案例：页面放一个连接，当点击链接，向后端发送请求，最终显示到页面上。再次点击链接，信息隐藏。效果：demo.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loo
复制链接

扫一扫

专栏目录