ajax完成团队信息异步添加【实际项目】
第一: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完成团队信息异步添加【实际项目】的更多相关文章
- 团队作业第五次—项目冲刺-Day7
Day7 part1-SCRUM: 项目相关 作业相关 具体描述 所属班级 2019秋福大软件工程实践Z班 作业要求 团队作业第五次-项目冲刺 作业正文 hunter--冲刺集合 团队名称 hunte ...
- 团队作业第五次—项目冲刺-Day6
Day6 part1-SCRUM: 项目相关 作业相关 具体描述 所属班级 2019秋福大软件工程实践Z班 作业要求 团队作业第五次-项目冲刺 作业正文 hunter--冲刺集合 团队名称 hunte ...
- 团队作业第五次—项目冲刺-Day5
Day5 part1-SCRUM: 项目相关 作业相关 具体描述 所属班级 2019秋福大软件工程实践Z班 作业要求 团队作业第五次-项目冲刺 作业正文 hunter--冲刺集合 团队名称 hunte ...
- 11月10日下午 ajax做显示信息以后用ajax、Bootstrp做弹窗显示信息详情
1.用ajax做弹窗显示信息详情 nation.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- [置顶] Ajax程序:处理异步调用中的异常(使用Asp.Net Ajax内建的异常处理方法)
无论在Window应用程序,还是Web应用程序以对用户友好的方式显示运行时的异常都是很有必要,尤其对于可能有很多不确定因素导致异常的Web应用程序;在传统的Web开发中,处理异常的方式——设计专门一个 ...
- ajax做显示信息以后用ajax、Bootstrp做弹窗显示信息详情
1.用ajax做弹窗显示信息详情 nation.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- .Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径
前言: 首先对于图片上传而言,在我们的项目开发中可以说出现的频率是相当的高的.这篇文章中,我将要描述的是在我们.Net中如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存 ...
- 团队作业第五次—项目冲刺-Day4
Day4 part1-SCRUM: 项目相关 作业相关 具体描述 所属班级 2019秋福大软件工程实践Z班 作业要求 团队作业第五次-项目冲刺 作业正文 hunter--冲刺集合 团队名称 hunte ...
- 团队作业第五次—项目冲刺-Day3
Day3 part1-SCRUM: 项目相关 作业相关 具体描述 所属班级 2019秋福大软件工程实践Z班 作业要求 团队作业第五次-项目冲刺 作业正文 hunter--冲刺集合 团队名称 hunte ...
随机推荐
- webservice的测试案例
1.服务器端 服务器接口Test_service.java package com.xiaostudy; /** * @desc 服务器接口 * @author xiaostudy * */ publ ...
- nginx web服务器详解1(转)
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://freeloda.blog.51cto.com/2033581/1285332 大 ...
- 在 Linux 服务器上搭建和配置 Hadoop 集群
实验条件:3台centos服务器,jdk版本1.8.0,Hadoop 版本2.8.0 注:hadoop安装和搭建过程中都是在用户lb的home目录下,master的主机名为host98,slave的主 ...
- spring boot2.1读取 apollo 配置中心2
第二篇:创建spring boot2.1项目 引用apollo的java客户端jar包 <dependency> <groupId>com.ctrip.framework.ap ...
- ubuntu install vue , vue-cli , how to create project..
<<install node.js <<the n model is manage the node.js version npm install -g n n stable ...
- 前端解析cookie出现多余的双引号的问题
登录界面,用户提交后,后台获取到用户名密码,然后会设置cookie,以便于前端使用,今天在修改项目记住密码的功能的时候,读取cookie,如果存在loginInfo字段说明用户在上一次点击了记住密码的 ...
- stdclass
$item = new stdClass(); $item->goods_id = $item_goods->getID(); $item->goods_name ...
- 前端构建大法 Gulp 系列
参考: 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp ...
- day5-subprocess模块
一.概述 实际应用中,有些时候我们不得不跟操作系统进行指令级别的交互,如Linux中的shell.Python中早期通过os模块和commands模块来实现操作系统级别的交互,但从2.4版本开始,官方 ...
- yum 数据库报错与重构
[root@dhcp yum.repos.d]# cd /var/lib/rpm/ [root@dhcp rpm]# rm __db.* -rf[root@dhcp rpm]# rpm --rebui ...