通过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 相关文章推荐
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
JS简单实现浮动窗口效果示例
Sep 07 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
微信小程序实现拍照和相册选取图片
May 09 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学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
PHP中获取内网用户MAC地址(WINDOWS/linux)的实现代码
2011/08/11 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
echarts.js 动态生成多个图表 使用vue封装组件操作
2020/07/19 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
python实现简单ftp客户端的方法
2015/06/28 Python
python绘制双柱形图代码实例
2017/12/14 Python
python判断数字是否是超级素数幂
2018/09/27 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
pandas的qcut()方法详解
2019/07/06 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
党校培训自我鉴定
2014/02/01 职场文书
幼儿园小班见习报告
2014/10/31 职场文书
优秀党支部申报材料
2014/12/24 职场文书
社区党建工作总结2015
2015/05/13 职场文书
2016年十一促销广告语
2016/01/28 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技
Python作用域和名称空间的详细介绍
2022/04/13 Python
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby