48 views

在SpringMVC环境中实现的Ajax异步请求(JSON格式数据)

By | 2019年8月5日
一 环境搭建
首先,我们需要构建一个常规的SpringMVC环境。不用说,我们需要引入杰克逊相关的JAR包,然后在Spring配置文件“SpringMVCServlet”中添加JSON解析相关配置。“XML”。我的完整代码如下:
<?xml version=”1.0″ encoding=”UTF-8″?>
<beans xmlns=”http://www.win-man.com/schema/beans”
xmlns:xsi=”http://www.win-man.com/2001/XMLSchema-instance” xmlns:context=”http://www.win-man.com/schema/context”
xmlns:mvc=”http://www.win-man.com/schema/mvc”
xsi:schemaLocation=”http://www.win-man.com/schema/beans
  http://www.win-man.com/schema/beans/spring-beans-4.0.xsd
       http://www.win-man.com/schema/context
       http://www.win-man.com/schema/context/spring-context-4.0.xsd
       http://www.win-man.com/schema/mvc
       http://www.win-man.com/schema/mvc/spring-mvc-4.0.xsd”>
<!– 避免IE执行AJAX时,返回JSON出现下载文件 –>
<bean id=”mappingJacksonHttpMessageConverter”
class=”org.springframework.http.converter.json.MappingJacksonHttpMessageConverter”>
<property name=”supportedMediaTypes”>
<list>
<value>text/html;charset=UTF-8</value>
<value>application/json;charset=UTF-8</value>
</list>
</property>
<property name=”objectMapper”>
<bean class=”org.codehaus.jackson.map.ObjectMapper”>
<property name=”dateFormat”>
<bean class=”java.text.SimpleDateFormat”>
<constructor-arg type=”java.lang.String” value=”yyyy-MM-dd HH:mm:ss”></constructor-arg>
</bean>
</property>
</bean>
</property>
</bean>
<!– 启动Spring MVC的注解功能,完成请求和注解POJO的映射 –>
<bean
class=”org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter”>
<property name=”messageConverters”>
<list>
<ref bean=”mappingJacksonHttpMessageConverter” /><!– json转换器 –>
</list>
</property>
</bean>
<mvc:annotation-driven
content-negotiation-manager=”contentNegotiationManager” />
<bean id=”contentNegotiationManager”
class=”org.springframework.web.accept.ContentNegotiationManagerFactoryBean”>
<!– true,开启扩展名支持,false关闭支持 –>
<property name=”favorPathExtension” value=”false” />
<!– 用于开启 /userinfo/123?format=json的支持 –>
<property name=”favorParameter” value=”true” />
<!– 设置为true以忽略对Accept Header的支持 –>
<property name=”ignoreAcceptHeader” value=”false” />
<property name=”mediaTypes”>
<value>
atom=application/atom+xml
html=text/html
json=application/json
xml=application/xml
*=*/*
</value>
</property>
</bean>
<context:annotation-config />
<!– 启动自动扫描该包下所有的Bean(例如@Controller) –>
<context:component-scan base-package=”cn.zifangsky.controller” />
<mvc:default-servlet-handler />
<!– 定义视图解析器 –>
<bean id=”jspViewResolver”
class=”org.springframework.web.servlet.view.InternalResourceViewResolver”>
<property name=”requestContextAttribute” value=”rc” />
<property name=”viewClass”
value=”org.springframework.web.servlet.view.JstlView” />
<property name=”prefix” value=”/WEB-INF/jsp/” />
<property name=”suffix” value=”.jsp” />
<property name=”order” value=”1″></property>
</bean>
</beans>
项目结构:
wKioL1ceL1_RzTmBAAA1S10S6x0204.png
注:我这里测试使用的完整jar包:http://pan.baidu.com/s/1dEUwdmL
仅供参考
二 测试实例
(1)在WEB-INF/jsp目录下新建了一个index.jsp文件,包含了简单的jQuery的ajax请求,请求数据的格式是JSON,具体代码如下:
<%@ page language=”java” contentType=”text/html; charset=UTF-8″
pageEncoding=”UTF-8″%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + “://” + request.getServerName() + “:” + request.getServerPort()
+ path + “/”;
%>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<base href=”<%=basePath%>”>
<script type=”text/javascript” src=”scripts/jquery/jquery-1.6.2.min.js”></script>
<script type=”text/javascript” src=”scripts/jquery/jquery.i18n.properties-min-1.0.9.js”></script>
<script type=”text/javascript” src=”scripts/jquery/jquery.autocomplete.js”></script>
<script type=”text/javascript” src=”scripts/jquery/jquery.loadmask.js”></script>
<script type=”text/javascript” src=”scripts/jquery/jquery.form.js”></script>
<script type=”text/javascript” src=”scripts/jquery/jquery.timers.js”></script>
<title>jQuery i18n</title>
<script type=”text/javascript”>
$().ready(
function() {
$(“#sub”).click(
function() {
var name = $(“#username”).val();
var age = 18;
var user = {“username”:name,”age”:age};
$.ajax({
url : ‘hello.json’,
type : ‘POST’,
data : JSON.stringify(user), // Request body
contentType : ‘application/json; charset=utf-8’,
dataType : ‘json’,
success : function(response) {
//请求成功
alert(“你好” + response.username + “[” + response.age + “],当前时间是:” + response.time + “,欢迎访问:http://www.zifangsky.cn”);
},
error : function(msg) {
alert(msg);
}
});
});
});
</script>
</head>
<body>
<input type=”text” id=”username”
style=”width: 100px; height: 30px; font-size: 20px; font-weight: bold;”>
<input type=”button” id=”sub” value=”Go”
style=”height: 40px; height: 30px;”>
<br>
</body>
</html>
(2)一个简单的model类User,代码如下:
package cn.zifangsky.controller;
public class User {
private String username;
private int age;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}
(3)controller类TestController.java:
package cn.zifangsky.controller;
import java.text.Format;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
@Controller
@Scope(“prototype”)
public class TestController {
/**
* 转到页面
*/
@RequestMapping(value = “/hello.html”)
public ModelAndView list() {
ModelAndView view = new ModelAndView(“index”);
return view;
}
/**
* ajax异步请求, 请求格式是json
*/
@RequestMapping(value = “/hello.json”, method = { RequestMethod.POST })
@ResponseBody
public Map<String, String> hello(@RequestBody User user) {
// 返回数据的Map集合
Map<String, String> result = new HashMap<String, String>();
Format format = new SimpleDateFormat(“yyyy-MM-dd HH:mm:ss”);
// 返回请求的username
result.put(“username”, user.getUsername());
// 返回年龄
result.put(“age”, String.valueOf(user.getAge()));
// 返回当前时间
result.put(“time”, format.format(new Date()));
return result;
}
}
关于具体的执行步骤我简单说一下:
1、项目启动后,在浏览器中访问:http://localhost:8089/SpringDemo/hello.html,然后会转到执行controller中的list方法,接着会转到/WEB-INF/jsp/index.jsp(PS:在controller中返回的是逻辑视图,跟在springmvc-servlet.xml文件中定义的路径前缀和后缀进行拼接后合成文件的真正路径)
2、在index.jsp页面上输入文本并单击按钮会触发一个Ajax请求,它从输入框中获取数据,并将默认的“age”参数拼接成一个json格式字符串,并将其提交给“hello.json”请求,该请求将在控制器中执行hello方法。
3、hello方法执行完毕后会返回一系列数据最后在页面中显示出来
4、效果如下:
本文编辑于2019年08月5日,属于云漫网络原创内容,由特约作者(CDN行业资深从事人)首发在win-man.com,云漫网络每日更新发布行业原创内容,转载请注明出处。否则属侵权行为一定追究责任。
本文转载于:http://win-man.com
本文关键词:高防CDN ddos攻击 高防行业 CDN行业
作者:CDN行业资深从事人

发表评论

电子邮件地址不会被公开。 必填项已用*标注