ajax完成团队信息异步添加【实际项目】
2016-10-25 15:49
405 查看
第一:ajax往后台传参如何串(目前理解是json数组直接传给对象) 第二:ajax返回的数值通过PrintWriter.print方法返回 【参考前台页面关于团队信息是如何实现的】 参考页面userCenterProjectForm1-1.html 增加团队的js代码 $(function(){ $('.am_btn_save').bind('click',function(){ var team = {}; var tableMember=$("#tableMember"); team.uname=$('#tuname').val(); team.deptname=$('#deptname').val(); team.points=$('#points').val(); $.ajax({ url:"/apply/addTeam.jspx", type:"get", data:{"uname":$("#tuname").val(),"deptname":$('#deptname').val(),"points":$('#points').val()}, success:function(data){ var _val = $('#teamIds').val(); $('#teamIds').val(_val+","+data); tableMember.append('<tr><td>'+team.uname+'</td><td>'+team.deptname+'<input name="teamId" class="teamId" type="hidden" value="'+data+'"></input></td><td title='+team.points+'>'+(team.points).substring(0,5)+'...</td><td><a href="javascript:" class="deleteTd" id="'+data+'">删除</a></td></tr>'); /* $(".addMemberPop,#marklayer").hide(); $('.edui-default').css("display","block"); $('.edui-editor-toolbarmsg').css("display","none"); */ } }); }); 增加团队的html代码 <div class="addMemberPop" style="height: 324px"> <div class="am_tl">新增团队成员</div> <div class="am_con" > <label><span>姓名</span><input type="text" id="tuname" value="" class="amName" placeholder="请输入姓名"></label> <label><span>单位</span><input type="text" id="deptname" value="" class="amNum" placeholder="请输入单位"></label> <label><span style="float: left;">履历亮点</span> <textarea id="points" rows="6" cols="30"></textarea> </label> </div> <div class="errorMsg"></div> <div class="am_btn" style="margin-top:100px;"> <a hrrf="javascript:" class="am_btn_save">添加</a> <a hrrf="javascript:" class="am_btn_cancel">关闭</a> </div> </div> 团队信息对应的ajax后台controller对应方法为:public void addProjectTeam @RequestMapping(value = "/apply/addTeam.jspx") public void addProjectTeam(@ModelAttribute ScTeam team,HttpServletResponse response,HttpServletRequest request){ System.out.println(team);// teamService.save(team); try { PrintWriter pw = response.getWriter(); pw.print(team.getId()); pw.close(); } catch (IOException e) { e.printStackTrace(); } } 思考:ajax上传图片 通过json串就可以给对象赋值;看上面标红的代码【自己测试一下】
相关文章推荐
- 【项目实战】---使用ajax完成用户名是否存在异步校验
- 添加删除表格(js完成)【自己实际项目】
- 利用ajax完成项目图册上传删除【实际项目】
- TP下ajax异步传输实例(微博项目:添加分组)
- 如何给MVC项目添加异步jquery.unobtrusive-ajax.min.js
- 用Ajax加载Google地图并向地图上添加标注信息
- 为dojo普及做贡献-C--ajax操作是完成了,但把添加、修改等按钮改成右键,再把提交表单改酷点
- AJAX实例:根据邮编自动完成地址信息
- AJAX实例:根据邮编自动完成地址信息
- AJAX根据邮政编码,自动完成城市和地址信息
- AJAX根据城市名,自动完成相应的城市信息
- eclipse插件项目中添加状态栏信息
- TFS团队代码管理器-项目添加以及项目删除
- 创建TFS团队项目日志记录和错误信息位置
- 在校完成项目—————学生信息自动筛选程序
- 不用ajax也能实现的功能!单击添加新行时可以删除这一行信息的源码
- 黄聪:Jquery+php+ajax实现表单异步提交,动态添加回复评论
- AJAX根据邮政编码,自动完成城市和地址信息
- AJAX根据邮政编码,自动完成城市和地址信息
- 搜索建议--AJAX (ASP.NET 异步完成)javascript 实现代码