本人不才,写点自己的心得。希望对大家有所帮助。
总体分为五个步骤:①springMVC中加入配置 ②页面Ajax请求 ③注解声明 ④导入jackson-all-1.9.11.jar 包(此包功能强大,感兴趣的童鞋可以问度娘) ⑤静态文件放过
首先第一步:
<!-- 从请求和响应读取/编写字符串 -->
<bean id="stringConverter"
class="org.springframework.http.converter.StringHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/plain;charset=UTF-8</value>
</list>
</property>
</bean>
<!-- 用于将对象转换为 JSON -->
<bean id="jsonConverter"
class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter"></bean>
<bean
class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
<property name="messageConverters">
<list>
<ref bean="stringConverter" />
<ref bean="jsonConverter" />
</list>
</property>
</bean>
在我理解看来基本都是固定格式,固定写法。
第二步:
注:此处的action没有实际意义可以忽略,因为具体的提交地址会在ajax请求写
<form action="/springMVC/user/login" method="post">
用户名:<input type="text" name="name" id="name"/> <br/>
密码:<input type="password" name="pwd" id="pwd"/> <br/>
生日:<input type="text" name="birthday"/>
<input type="button" value="登录" id="btnAjax"/>
</form>
Ajax请求
$(function(){
注:button按钮提交 通过id 触发具体的单击事件
$("#btnAjax").click(function(){
var url ="/springMVC/user/ajaxTest";// <%--/项目名称/命名空间(没有设置可以不写)/提交给要处理的方法/--%>
$.post(
url,
{username:$("name").val(),password:$("pwd").val()},<%-- 方法参数对应表单元素 传参--%>
function(data){<%-- 回调函数 --%>
$("#info").html(data.userName);<%-- 页面打印 体现异步效果 --%>
}
"json" <%-- json格式 --%>
),
});
});
第三步:
//不明白注解意思的建议百度查阅,很好懂。
//此方法目的在于地址栏输出login 跳转到Login.jsp
@RequestMapping(value="/login",method=RequestMethod.GET)
public String toLogin(){
return "Login";//注意此处字符串区分大小写,要和你的jsp名一致,然后通过配置文件会交给视图解析器来处理
}
@RequestMapping("/ajaxTest",method=RequestMethod.POST)
public @ResponseBody User ajaxTest(String username,Model model){//关键在@ResponseBody加上就是ajax了
User user = new User();
if("admin".equals(username)){
user.setUserName("老王");
}
else if("123".equals(username)){
user.setUserName("老李");
}
return user;
}
第四步:基本算是完成了,但是别忘了导入jar包,我用的是这个jackson-all-1.9.11.jar
第五步:ajax需要js文件也别忘记导入,我用的是这个
<script type="text/javascript" src="/springMVC/js/jquery-1.7.js"></script>
最后总结:记住五个步骤,遇到问题不要怕,百度查阅。多加练习。都是一个套路。