使用ajax+SpringMVC实现前后端数据传递
程序员文章站
2022-07-02 22:38:40
...
在不使用ajax技术时,可以在jsp页面上发出一个"xxx.do?param=xxx"的请求,将参数param传到后台,后台Controller类中对应的方法返回ModelAndView对象,前端可以用EL表达式接受返回的数据。
这么做会让整个jsp页面刷新一次。如果已经在网页上做了一些操作,比如在输入框中输入了一些东西,那jsp刷新之后输入的内容也都不存在了。使用ajax技术可以解决这种问题。
前端写法:
$.ajax //这是jQuery的写法,需要在jsp中加入对应的script
(
{
url:"/Project/xxx.do",
data:"param1="+str+"¶m2="+str2,
dataType:"json",
contentType: "application/json; charset=utf-8",
success:function(data)
{
var a = data.a; //得到后台发回的数据a
var b = data.b; //得到后台发回的数据b
//do something
}
}
)
这里的url就是原来的"xxx.do"请求,在前面需要加上项目名称Project。data用来向后台传参数,也就是原来的"?"后面的部分。
在后台处理完成后,会执行success后面的那个function,data是后台发回来的数据,这里使用json格式。假设后台对应的方法是这样的:
@RequestMapping(value="/xxx.do")
@ResponseBody
public Map<String, Object> ReturnResult(@RequestParam(value="param") String str)
{
Map<String, Object> res = new HashMap<String, Object>();
res.put("a",a); //a,b可以是任意对象类型
res.put("b",b);
return res;
}
方法返回值是Map对象。这里要使用@ResponseBody注解,使得返回值能自动转换为json类型数据传到前台。同时项目中还要加入这些jar包:
- commons-lang-版本号.jar
- jackson-annotations-版本号.jar
- jackson-core-版本号.jar
- jackson-databind-版本号.jar
上一篇: 浅认识Promise
下一篇: Promise基本认识
推荐阅读
-
H5中怎样使用postMessage实现两个网页间传递数据
-
Android 使用Intent传递数据的实现思路与代码
-
Android 使用Intent传递数据的实现思路与代码
-
HTML5中使用postMessage实现两个网页间传递数据
-
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
-
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
-
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
-
HTML5中使用postMessage实现两个网页间传递数据
-
使用validate.js实现表单数据提交前的验证方法
-
vue中通过使用$attrs实现组件之间的数据传递功能