ajax接收后端数据

案例:

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

效果

ajax接收后端数据_第1张图片

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=$("
编号姓名学号爱好
"
); for(var i=0;i<jsonObj.length;i++){ var obj=jsonObj[i]; var tr=$(""+obj.id+""+obj.name+""+obj.sno+""+obj.hobby+"") 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;
	}
}

效果

ajax接收后端数据_第2张图片

你可能感兴趣的:(java)