1、使用response输出请求处理数据,响应请求:
控制器中的处理方法:
@RequestMapping(value="getValue3.action")
public void getValue3(LsjmUser user, HttpServletResponse response)
{
// 设置reponse编码和响应头编码格式, 防止中文乱码
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
// 可以自己组装json字符串, 也可以用fastjson转换
Map<String,String> result = new HashMap<String, String>();
result.put("result", "成功");
String resultStr = JSON.toJSONString(result);
//String resultStr = "{\"result\":\"chaol\"}";
PrintWriter pw = null;
try {
pw = response.getWriter();
pw.write(resultStr);
pw.flush();
} catch (Exception e) {
e.printStackTrace();
} finally{
pw.close();
}
}
前台页面及 js 代码(首先记得要引入jquery):
<form method="post" id="myform">
<input type="text" id="uname" name="uname" />
<input type="text" id="pwd" name="pwd" />
<input type="submit" value="提交" />
</form>
<script>
$(document).ready(function(){
var unameInput = $("#uname");
// input元素失去焦点后触发
unameInput.blur(function(){
//console.info(unameInput.val())
$.ajax({
url:"user/getValue3.action",
type:"post",
data:{"uname":unameInput.val()},
datatype:"json",
success:function(data){
console.info("success");
console.info(JSON.parse(data).result); //成功
},
error:function(){
console.info("error")
}
})
})
})
</script>
2、springMVC中对ajax的支持
使用 @ResponseBody将方法的返回类型 Map 或者 List 转换成一个Json对象返回给用户界面
前提条件:导入三个jar:
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.6.0</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.6.0</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.6.0</version>
</dependency>
控制器中的处理方法:
@ResponseBody //将Map、List转换成Json对象返回
@RequestMapping(value="ajaxDemo.action")
public Map<String, String> ajaxDemo(LsjmUser user)
{
// 可处理中文乱码问题
Map<String, String> result = new HashMap<String, String>();
result.put("result", "成功");
result.put("uname", user.getUname());
return result;
}
前台页面及 js 代码(首先记得要引入jquery):
<form method="post" id="myform">
<input type="text" id="uname" name="uname" />
<input type="text" id="pwd" name="pwd" />
<input type="button" value="提交" onclick="commit()" />
</form>
<script>
function commit(){
$.ajax({
url:"user/ajaxDemo.action",
type:"post",
data:{"uname":$("#uname").val(), "pwd": $("pwd").val()},
datatype:"json",
success:function(data){
console.info(JSON.stringify(data)); //{"result":"成功","uname":"chaol"}
},
error:function(){
console.info("error")
}
})
}
</script>