• 通过button将form表单的数据提交到action层


     

    form表单中不需要写action的路径,需要给form表单一个唯一的id,将你要提交的信息的表单中的标签name="action中的javabean对象.javabean属性"。给button按钮添加一个onclick()点击事件,并实现该点击事件,在该onclick()方法中通过ajax将form表单中的数据提交给action层

    JSP页面中的代码:
    1
    <form id="handleform"> 2 <!-- 根据学生id修改学生信息 --> 3 <input type="hidden" name="student.stuid"/><!-- 隐藏学生id --> 4 <div class="input-group el_modellist" role="toolbar"> 5 <span class="el_spans">要修改的班级:</span> 6 <select class="selectpicker form-control" name="student.className" id="fmchechunit" title="请选择"> 7 <option value="0">--请选择班级--</option> 8 <option value="1">软件一班</option> 9 <option value="2">软件二班</option> 10 </select> 11 </div> 12 <span class="el_spans">学生姓名:</span> 13 <input type="text" id="student.name"/> 14 <div class="input-group el_modellist" role="toolbar"> 15 <span class="el_spans">学生详细信息:</span> 16 <textarea id="studentMsg" class="form-control texta" rows="10" name="student.msg"></textarea> 17 </div> 18 19 <div class="modal-footer"> 20 <button id="submitButton" onclick="saveButton()" type="button" class="btn btn-primary">更新</button> 21 </div> 22 </form> 23 <script type="text/javascript"> 24 function saveButton(){ 25 //通过ajax异步将数据发送给action层 26 $.ajax({ 27 url : '${pageContext.request.contextPath}/stu/stu_upstudent.action',//这里写上你的action路径 28 data : $("#handleform").serialize(),//将你在form表单上提交的数据序列化 29 type : 'POST', //提交方式 30 dataType : 'json', //提交的数据类型 31 async:true, //是否异步 32 success : function(data) {//这是个回调函数 data表示从action中传过来的json数据 33 //弹出从action层传过来的json格式的数据(用来显示是否更新成功) 34 alert(data.result); 35 } 36 }); 37 } 38 </script>
    action层中的代码:
    1
    @Controller 2 @Scope("prototype") 3 // 控制层,多例模式 4 public class DangerAction extends ActionSupport { 5 6 private Student student; 7 public void setStudent(Student student){ 8 this.student = student; 9 } 10 public Student getStudent(){ 11 return this.student; 12 } 13 14 @Resource 15 private StudentService studentService; 16 public StudentService getStudentService() { 17 return studentService; 18 } 19 public void setStudentService(StudentService studentService) { 20 this.studentService = studentService; 21 } 22 public String updateStudent throws Exception{ 23 24 boolean flag = studentService.update(student); 25 HttpServletResponse response = ServletActionContext.getResponse(); 26 27      //通过json对象将修改反馈信息响应给jsp 28 JSONObject json = new JSONObject(); 29 if (flag) { 30 System.out.println(flag); 31 json.put("result", "修改成功"); 32 } else { 33 System.out.println(flag); 34 json.put("result", "修改失败"); 35 } 36 System.out.println(json.toString()); 37 response.setContentType("text/html;charset=UTF-8"); 38 response.getWriter().write(json.toString()); 39 return null;//如果不需要跳转页面就写上null,如果要跳转页面就自己另外写上 40 } 41 }
    javabean代码: 
    1
    public class Student{ 2 private int stuid; 3 private int className; 4 private int name; 5 private String studentMsg; 6 public int getStuid() { 7 return stuid; 8 } 9 public void setStuid(int stuid) { 10 this.stuid = stuid; 11 } 12 public int getClassName() { 13 return className; 14 } 15 public void setClassName(int className) { 16 this.className = className; 17 } 18 public int getName() { 19 return name; 20 } 21 public void setName(int name) { 22 this.name = name; 23 } 24 public String getStudentMsg() { 25 return studentMsg; 26 } 27 public void setStudentMsg(String studentMsg) { 28 this.studentMsg = studentMsg; 29 } 30 31 }
    不能只满足于写完代码运行结果正确就完事,时常考虑如何让代码更加简练更加容易维护、容易扩展和复用,只有这样才可以真正得到提高 --《来自大话设计模式》
  • 相关阅读:
    source insight快捷键及使用技巧
    HTTP 状态码
    select poll epoll三者之间的比较
    服务器程序后台化以及守护进程的编写规范
    Linux 信号表
    Linux下有线无线网络配置------命令模式
    浅谈 qmake 之 pro、pri、prf、prl文件
    Python VUE 基础知识
    VUE 实现tab切换页面效果
    爬虫框架:scrapy
  • 原文地址:https://www.cnblogs.com/lixianyuan-org/p/7492156.html
Copyright © 2020-2023  润新知