通过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 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
JavaScript入门教程(3) js面向对象
Jan 31 Javascript
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
基于JQuery的密码强度验证代码
Mar 01 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
单元选择合并变色示例代码
May 26 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
react组件基本用法示例小结
Apr 27 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/08/08 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
es6数值的扩展方法
2019/03/11 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python中的内置函数getattr()介绍及示例
2014/07/20 Python
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
python中尾递归用法实例详解
2015/04/28 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
PyCharm License Activation激活码失效问题的解决方法(图文详解)
2020/03/12 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
2014年三八妇女节活动方案
2014/02/28 职场文书
无偿献血倡议书
2014/04/14 职场文书
反腐倡廉观后感
2015/06/08 职场文书
紧急迫降观后感
2015/06/15 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
如何使用pdb进行Python调试
2021/06/30 Python
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电