通过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 相关文章推荐
Stop SQL Server
Jun 21 Javascript
新手常遇到的一些jquery问题整理
Aug 16 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
jquery实现简单文字提示效果
Dec 02 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
JavaScript console的使用方法实例分析
Apr 28 Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 Javascript
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
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
第十一节 重载 [11]
2006/10/09 PHP
提取HTML标签
2006/10/09 PHP
Yii PHP Framework实用入门教程(详细介绍)
2013/06/18 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
十大使用PHP框架的理由
2015/09/26 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
javascript引用对象的方法
2007/01/11 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
python实现石头剪刀布程序
2021/01/20 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
Django 大文件下载实现过程解析
2019/08/01 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
物业保安员岗位职责
2014/03/14 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
费用申请报告范文
2015/05/15 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
导游词之无锡梅园
2019/11/28 职场文书
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python