使用注解springmvc配合jsp/ajax/json,实现简单的jsp遍历后台数据

最新推荐文章于 2022-02-23 23:22:13 发布

原创最新推荐文章于 2022-02-23 23:22:13 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#springmvc #ajax #jsp #json #注解

一些实例的积累专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Ajax实现点击按钮后异步加载问题模型数据，包括问题、是否解决和价值三个属性的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，要实现的预览：在一个无任何信息的空页面点击下图的“热门问题”按钮后，异步访问一个（有问题，是否解决，价值三个属性的）问题模型的的数据的简易ajax演示。

1，点击热门问题前：

2，点击热门问题后产生异步效果：

二，准备工具：myeclipse/eclipse。

包/目录结构：

spring的包是spring-framework-4.2.3.RELEASE-dist.zip里面全部导进去的（为了偷懒~），jquery和bootstrap的js和css都是在官网很好下载的~

三，代码实现：

1.模型QuestionModel（M）：

public class QuestionModel {
private String question;
private String resolve;
private int valueTotal;
public String getQuestion() {
	return question;
}
public void setQuestion(String question) {
	this.question = question;
}
public String getResolve() {
	return resolve;
}
public void setResolve(String resolve) {
	this.resolve = resolve;
}
public int getValueTotal() {
	return valueTotal;
}
public void setValueTotal(int valueTotal) {
	this.valueTotal = valueTotal;
}
}

2.控制器WelcomeController（C）：

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.yuege.model.QuestionModel;

@Controller
public class WelcomeController{

	@RequestMapping(value = "/HotIssue.do", method = RequestMethod.GET, headers = "Accept=application/json")		
	@ResponseBody
	public QuestionModel allQuestion(HttpServletRequest req, HttpServletResponse resp){
		QuestionModel questionModel = new QuestionModel();
		questionModel.setQuestion("问题");
		questionModel.setResolve("1");
		questionModel.setValueTotal(1);
		return questionModel;
	}
}

3.视图（V）：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String _path = request.getContextPath();
	String _basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ _path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/resources/core/css/bootstrap.min.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/core/js/jquery-1.12.0.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/core/js/bootstrap.min.js"></script>



<script type="text/javascript">
	$(document).ready(function() {
		$("#HotIssue").click(function() {
			$.ajax({
				dataType : "json",
				url : "HotIssue.do",
				type : "GET",
				success : function(data) {
					$("#allquestion").html(data.question)
					$("#allresolve").html(data.resolve)
					$("#allvalueTotal").html(data.valueTotal)
				}
			});
		});
	});
</script>


</head>
<body>

	<div class="container">
		<div class="row">

			<!-- 导航栏  -->
			<div class="col-md-1" style="background-color: #dedef8;">
				<ul class="nav nav-pills" id="myTab">
					<li><a id="HotIssue" href="#HotIssueContent"
						data-toggle="tab">热门问题</a></li>
					<li><a href="#">C#</a></li>
					<li><a href="#">VB.Net</a></li>
					<li><a href="#">Java</a></li>
					<li><a href="#">PHP</a></li>
				</ul>
			</div>


			<!-- 导航栏下的内容  -->
			<div class="col-md-11">
				<div id="myTabContent" class="tab-content">

					<div class="tab-pane fade" id="HotIssueContent">
						<table class="table table-striped">
							<caption>全部问题</caption>
							<thead>
								<tr>
									<th>问题</th>
									<th>是否解决</th>
									<th>价值</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td id="allquestion"><a href=""></a></td>
									<td id="allresolve"></td>
									<td id="allvalueTotal"></td>
								</tr>
							</tbody>
						</table>
					</div>







				</div>
			</div>


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

4.web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
	id="WebApp_ID" version="3.0">
	<display-name>springmvc_ajax_json_jsp</display-name>

	<servlet>
		<servlet-name>springmvc_ajax_json_jsp</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>springmvc_ajax_json_jsp</servlet-name>
		<url-pattern>*.do</url-pattern>
	</servlet-mapping>



	<!-- 配置根应用程序，也就是ApplicationContext -->
	<listener>
		<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
	</listener>
	<context-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>
            classpath:applicationContext.xml
    </param-value>
	</context-param>



	<welcome-file-list>
		<welcome-file>/WEB-INF/views/jsp/Welcome.jsp</welcome-file>
	</welcome-file-list>
</web-app>

5.springmvc的配置文件

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="
    http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
    http://www.springframework.org/schema/context
    http://www.springframework.org/schema/context/spring-context-3.0.xsd
    http://www.springframework.org/schema/mvc  
    http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">


	<!-- 视图解析器 -->
	<bean
		class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="viewClass"
			value="org.springframework.web.servlet.view.JstlView" />
		<property name="prefix" value="/WEB-INF/views/jsp/" />
		<property name="suffix" value=".jsp" />
	</bean>


	<context:annotation-config />
	<!-- 扫描 注解 -->
	<context:component-scan base-package="com.yuege.web" />
	<!-- Spring启用了 mvc:annotation-driven MVC注解配置 -->
	<mvc:annotation-driven />

</beans>

6.applicationContext.xml

这里不用配置~

7.部署在tomcat后启动tomcat，在浏览器输入http://localhost:8080/springmvc_ajax_json_jsp