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


Posted in Javascript onSeptember 08, 2017

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

JSP页面中的代码:

<form id="handleform">
    <!-- 根据学生id修改学生信息 -->
    <input type="hidden" name="student.stuid"/><!-- 隐藏学生id -->
    <div class="input-group el_modellist" role="toolbar">
     <span class="el_spans">要修改的班级:</span>
     <select class="selectpicker form-control" name="student.className" id="fmchechunit" title="请选择">
      <option value="0">--请选择班级--</option>
      <option value="1">软件一班</option>
      <option value="2">软件二班</option>
     </select>
    </div>
    <span class="el_spans">学生姓名:</span>
    <input type="text" id="student.name"/>
     <div class="input-group el_modellist" role="toolbar">
      <span class="el_spans">学生详细信息:</span>
      <textarea id="studentMsg" class="form-control texta" rows="10" name="student.msg"></textarea>
     </div>

     <div class="modal-footer">
      <button id="submitButton" onclick="saveButton()" type="button" class="btn btn-primary">更新</button>
     </div>
   </form>
   <script type="text/javascript">
    function saveButton(){
      //通过ajax异步将数据发送给action层
      $.ajax({
       url : '${pageContext.request.contextPath}/stu/stu_upstudent.action',//这里写上你的action路径
       data : $("#handleform").serialize(),//将你在form表单上提交的数据序列化
       type : 'POST', //提交方式
       dataType : 'json', //提交的数据类型
       async:true, //是否异步
       success : function(data) {//这是个回调函数 data表示从action中传过来的json数据
       //弹出从action层传过来的json格式的数据(用来显示是否更新成功)
       alert(data.result);
       }
      });
    }
   </script>

action层中的代码:

@Controller
@Scope("prototype")
// 控制层,多例模式
public class DangerAction extends ActionSupport {
 
 private Student student;
 public void setStudent(Student student){
  this.student = student;
 }
 public Student getStudent(){
  return this.student;
 }
 
 @Resource
 private StudentService studentService;
 public StudentService getStudentService() {
  return studentService;
 }
 public void setStudentService(StudentService studentService) {
  this.studentService = studentService;
 }
 public String updateStudent throws Exception{
  
  boolean flag = studentService.update(student);
  HttpServletResponse response = ServletActionContext.getResponse();
  

 //通过json对象将修改反馈信息响应给jsp
  JSONObject json = new JSONObject();
  if (flag) {
   System.out.println(flag);
   json.put("result", "修改成功");
  } else {
   System.out.println(flag);
   json.put("result", "修改失败");
  }
  System.out.println(json.toString());
  response.setContentType("text/html;charset=UTF-8");
  response.getWriter().write(json.toString());
  return null;//如果不需要跳转页面就写上null,如果要跳转页面就自己另外写上
 }
}

javabean代码:

public class Student{
 private int stuid;
 private int className;
 private int name;
 private String studentMsg;
 public int getStuid() {
  return stuid;
 }
 public void setStuid(int stuid) {
  this.stuid = stuid;
 }
 public int getClassName() {
  return className;
 }
 public void setClassName(int className) {
  this.className = className;
 }
 public int getName() {
  return name;
 }
 public void setName(int name) {
  this.name = name;
 }
 public String getStudentMsg() {
  return studentMsg;
 }
 public void setStudentMsg(String studentMsg) {
  this.studentMsg = studentMsg;
 }
 
}

以上这篇通过button将form表单的数据提交到action层的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
实例:尽可能写友好的Javascript代码
Oct 09 Javascript
jQuery.ajax 用户登录验证代码
Oct 29 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
首页图片漂浮效果示例代码
Jun 05 Javascript
倾力总结40条常见的移动端Web页面问题解决方案
May 24 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 #Javascript
JavaScript实现图片拖曳效果
Sep 08 #Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 #Javascript
javascript将list转换成树状结构的实例
Sep 08 #Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 #Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 #Javascript
js HTML5 canvas绘制图片的方法
Sep 08 #Javascript
You might like
如何使用PHP获取网络上文件
2006/10/09 PHP
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
PHP基本语法总结
2014/09/06 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
Django 重写用户模型的实现
2019/07/29 Python
解决python运行启动报错问题
2020/06/01 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
《九寨沟》教学反思
2014/04/08 职场文书
中秋晚会策划方案
2014/06/12 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
Pytorch 如何实现LSTM时间序列预测
2021/05/17 Python