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

来源：互联网发布：淘宝店招全屏显示编辑：程序博客网时间：2024/05/29 05:03

一，要实现的预览：在一个无任何信息的空页面点击下图的“热门问题”按钮后，异步访问一个（有问题，是否解决，价值三个属性的）问题模型的的数据的简易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;@Controllerpublic class WelcomeController{@RequestMapping(value = "/HotIssue.do", method = RequestMethod.GET, headers = "Accept=application/json")@ResponseBodypublic 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"><!-- 视图解析器 --><beanclass="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

3 1