ajAx与springmvc之间交互
来源:互联网 发布:苹果手机备份软件 编辑:程序博客网 时间:2024/05/29 14:00
(1)简单交互:
<table style="width: 100%" class="table" cellspacing="1" cellpadding="1" border="0">
<tr><td class="ti1" colSpan="2">请选择审讯室</td></tr>
<tr><td class="ti2hui">审讯室名称</td><td class="ti1cu">
<select id="roomid" name="roomid" >
<c:forEach items="${roomlist}" var="room">
<option value ="${room.id}">${room.name}</option>
</c:forEach>
</select>
</td></tr>
<tr><td class="ti2hui" colSpan="2" align="center"><input type="button" onclick="setshow()" value="确定"/> </td></tr>
</table>
------------------------------ajax-----提交的参数可以通过url提交,也可以用data:{}方式提交----------------------------------------------
function setshow(){
$.ajax( {
type : "POST",
url : "<%=request.getContextPath()%>/initroom.do?method=set",
data : {
'room' : $("#roomid").find('option:selected').text(),
'roomid' :$("#roomid").val()
},
dataType: "json",
success : function(data) {
if(data.success){
alert("设置成功!");
}
else{
alert("设置失败!");
}
},
error :function(){
alert("网络连接出错!");
}
});
}
------------------------spring mvc-------------------------------------------------
@RequestMapping(params = "method=set")
public void jump(HttpSession session,HttpServletRequest request, HttpServletResponse response) throws Exception{
String roomid= request.getParameter("roomid");
String room= request.getParameter("room");
session.setAttribute("ROOMID", roomid);
session.setAttribute("ROOMNAME", room);
System.out.println("session set:"+room+"=="+roomid);
response.setCharacterEncoding("utf-8");
response.getWriter().write("{\"success\":true }");
response.getWriter().flush();
}
(2)springmvc 返回信息到ajax:
import com.googlecode.jsonplugin.JSONUtil;
List<Records> recordList = new ArrayList<Records>();
//获取recordlist操作省略
response.setCharacterEncoding("utf-8");
response.getWriter().write("{\"success\":true, \"data\":" + JSONUtil.serialize(recordList) + "}");
response.getWriter().flush();
-------------------------------ajax处理序列化对象--------------------------------------------
var text = '';
$(data.data).each(function() {
text = text + '<li onclick="selectRecord(' + this.id + ')" style="cursor: pointer; height:20px; list-style:none; valign: center;line-height:23px;"><div style="float:left; width:15px; height:20px; background:url(Images/record_icon.png) no-repeat center;"></div>' + this.name + '</li>';
});
$('#recordDiv').html(text);
(3)最先进的做法:
在 Spring mvc3中,响应、接受 JSON都十分方便。
使用注解@ResponseBody可以将结果(一个包含字符串和JavaBean的Map),转换成JSON。
使用 @RequestBody 注解前台只需要向 Controller 提交一段符合格式的 JSON,Spring 会自动将其拼装成 bean。
Spring这个转换是靠org.codehaus.jackson这个组件来实现的,所有需要引入jackson-core-asl和org.codehaus.jackson两个jar包
- <title>Spring MVC</title>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
- <script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
- <script type="text/javascript" src="<%=request.getContextPath()%>/scripts/user/index.js"></script>
- </head>
- <body>
- <div id="info"></div>
- <form action="add" method="post" id="form">
- 编号:<input type="text" name="id"/>
- 姓名:<input type="text" name="username"/>
- 年龄:<input type="text" name="age"/>
- <input type="button" value="提交" id="submit"/>
- </form>
- </body>
- </html>
- //将一个表单的数据返回成JSON对象
- $.fn.serializeObject = function() {
- var o = {};
- var a = this.serializeArray();
- $.each(a, function() {
- if (o[this.name]) {
- if (!o[this.name].push) {
- o[this.name] = [ o[this.name] ];
- }
- o[this.name].push(this.value || '');
- } else {
- o[this.name] = this.value || '';
- }
- });
- return o;
- };
- $(document).ready(
- function() {
- jQuery.ajax( {
- type : 'GET',
- contentType : 'application/json',
- url : 'user/list',
- dataType : 'json',
- success : function(data) {
- if (data && data.success == "true") {
- $('#info').html("共" + data.total + "条数据。<br/>");
- $.each(data.data, function(i, item) {
- $('#info').append(
- "编号:" + item.id + ",姓名:" + item.username
- + ",年龄:" + item.age);
- });
- }
- },
- error : function() {
- alert("error")
- }
- });
- $("#submit").click(function() {
- var jsonuserinfo = $.toJSON($('#form').serializeObject());
- alert(jsonuserinfo);
- jQuery.ajax( {
- type : 'POST',
- contentType : 'application/json',
- url : 'user/add',
- data : jsonuserinfo,
- dataType : 'json',
- success : function(data) {
- alert("新增成功!");
- },
- error : function(data) {
- alert("error")
- }
- });
- });
- });
- @Controller
- @RequestMapping("/user")
- public class DemoController {
- private Logger logger = LoggerFactory.getLogger(DemoController.class);
- @RequestMapping(value = "/list", method = RequestMethod.GET)
- @ResponseBody
- public Map<String, Object> getUserList() {
- logger.info("列表");
- List<UserModel> list = new ArrayList<UserModel>();
- UserModel um = new UserModel();
- um.setId("1");
- um.setUsername("sss");
- um.setAge(222);
- list.add(um);
- Map<String, Object> modelMap = new HashMap<String, Object>(3);
- modelMap.put("total", "1");
- modelMap.put("data", list);
- modelMap.put("success", "true");
- return modelMap;
- }
- @RequestMapping(value = "/add", method = RequestMethod.POST)
- @ResponseBody
- public Map<String, String> addUser(@RequestBody UserModel model) {
- logger.info("新增");
- logger.info("捕获到前台传递过来的Model,名称为:" + model.getUsername());
- Map<String, String> map = new HashMap<String, String>(1);
- map.put("success", "true");
- return map;
- }
- }
- ajAx与springmvc之间交互
- Ajax与SpringMvc交互
- springmvc与Ajax交互
- springmvc与ajax交互
- ajax与springMVC交互
- ajax与springmvc交互
- Ajax与SpringMVC交互详解
- SpringMVC与Ajax数据交互
- SpringMVC与ajax交互流程与实现
- jquery的ajax请求与springMVC交互
- 使用ajax与springmvc后台交互
- ajax与servlet之间的交互方式
- AJAX和SpringMVC交互
- ajax+springmvc数据交互
- Android 与Springmvc之间交互若干问题(消息,文件,自定义dialog...)
- SpringMVC与安卓之间的交互1
- SpringMVC学习笔记:Ajax与Controller的参数交互
- springmvc数据绑定笔记、ajax与后台数据交互笔记
- 如何--关闭/开启--Oracle 10g数据库
- Linux用户空间与内核空间内存映射
- 负载均衡
- 命令行 或者 桌面启动ubuntu
- 菜鸟成长记-----用python写一个简单的小爬虫
- ajAx与springmvc之间交互
- openstack plugin 之(二)怎样写 OpenStack Neutron 的 Plugin
- Oracle 12C容器数据库(CDB)和插拔数据库(PDB)的创建(一)
- ContentObser实例
- Mysql 设置时间自动生成
- java,你真的理解,=赋值的含义吗?
- erlang vim 插件安装
- Android开发中的那些坑之-------------string.xml里面的通配符
- Unity3D编辑器视频教程