jquery通过插件添加文件
先到网上去下载相关的插件,再引入,在使用,用html的mode=fade进行使用
添加评语并传递到后台
-
*/ //通过点击事件来进行添加 $(document).on('click', '.J_add', function(e){ //通过点击事件,用target获得点击对象,用parents祖先函数获得到tr、用find找到子孙元素、用val()获取到select选中的值 var buttonTarget=$(e.target), tr = $(e.target).parents('tr'), id = $(tr).attr('data-id'), studentName=$(tr).attr('data-number'), evaluationWord=$(tr).find("select").val(), person; if(evaluationWord==0){ Alert("请选择添加的评语"); } else{ //改变按钮颜色,后台合页面后success里面去 buttonTarget.css("background-color", "#1AA094"); //保存对象进行传递 person = { 'id': id, 'studentName': studentName, 'evaluationWord': evaluationWord }; $.ajax({ //去到url.js里面找到url和type type: jQuery.url.studentEvaluation.evaluationAdd.type, url: jQuery.url.studentEvaluation.evaluationAdd.url, contentType: "application/x-www-form-urlencoded; charset=utf-8", data: person, //JSON.stringify dataType: "json", success: function (rs) { if( rs.code == 0){ buttonTarget.css("background-color", "#1AA094"); }else{ Alert('提示信息', '添加失败,服务器连接!错误'); } }, error: function (message) { $('#addOwner').modal('hide'); Alert('提示信息', '操作失败,请求失败!'); } }); } });
html代码:
-
<!-- 新增对话框 --> <div class="modal fade" id="J_addCouDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog " role="document" style="width: 880px;"> <div class="modal-content "> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">新增</h4> </div> <div class="modal-body"> <form class="form-horizontal J_addForm" id="uploadForm" enctype="multipart/form-data"> <div class="form-group"> <label class="col-sm-2 control-label">图片:</label> <input id="file" type="file" name="file" class="file"> <!-- 上传文件 --> </div> <div class="form-group"> <label class="col-sm-2 control-label">标题:</label> <div class="panel-group"> <input id="editable-select2" class="form-control J_title w190" name="news_title"/> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">内容:</label> <div class="panel-group"> <textarea name="work_content" class="J_workContent" id="J_workContentId" cols="30" rows="5"></textarea> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary J_addCouDlg" id="upload">发布</button> </div> </div> </div> </div> <!-- 编辑对话框 --> <div class="modal fade" id="J_addCouEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <input type="hidden" class='hiddenCouEdit' value=''> <div class="modal-dialog " role="document" style="width: 550px;"> <div class="modal-content "> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">编辑</h4> </div> <div class="modal-body"> <form class="form-horizontal J_editForm " id="addSee"> <div class="form-group"> <label class="col-sm-3 control-label">标题</label> <div class="col-sm-2"> <input id="editable-select2 " class="form-control J_courseWork_name w190" name="courseWork_name" > </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">作业内容</label> <div class="col-sm-2"> <textarea id="editable-select2 " class="form-control J_courseWork_tea w190" name="courseWork_tea" ></textarea> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary J_addConEDit">确定</button> </div> </div> </div> </div>