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

Posted 2020-10-06 以前、以后

　

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 }