通过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 相关文章推荐
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
一个php+js实时显示时间问题
Oct 12 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
javascript实现下雨效果
Mar 27 Javascript
深入理解vue Render函数
Jul 19 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
vue axios整合使用全攻略
May 24 Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 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分割合并两个字符串的函数实例
2015/06/19 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
2017/03/02 PHP
php对象工厂类完整示例
2018/08/09 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
jquery 输入框数字限制插件
2009/11/10 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
让Python代码更快运行的5种方法
2015/06/21 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
控制工程专业个人求职信
2013/09/25 职场文书
大学生求职自荐信
2013/12/12 职场文书
工程招投标邀请书
2014/01/26 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
教师个人工作总结范文2014
2014/11/10 职场文书
停电调休通知
2015/04/16 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
Navicat连接MySQL错误描述分析
2021/06/02 MySQL
Redis如何实现分布式锁
2021/08/23 Redis