通过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 相关文章推荐
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
jQuery操作select的实例代码
Jun 14 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
js快速排序的实现代码
Dec 08 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
纯js+css实现在线时钟
Aug 18 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 日志缩略名的创建函数代码
2010/05/26 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
Python运用于数据分析的简单教程
2015/03/27 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
python删除过期log文件操作实例解析
2018/01/31 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
TensorFlow损失函数专题详解
2018/04/26 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
谈谈Python中的while循环语句
2019/03/10 Python
pygame实现五子棋游戏
2019/10/29 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
实习心得体会
2014/01/02 职场文书
优秀企业获奖感言
2014/02/01 职场文书
元旦主持词开场白
2015/05/29 职场文书
网络营销实训总结
2015/08/03 职场文书
董事长秘书工作总结
2015/08/14 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python