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串就可以给对象赋值;看上面标红的代码【自己测试一下】

 

posted @ 2016-10-25 15:49  涤新云  阅读(220)  评论(0编辑  收藏  举报