通过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的.live()和.die() 使用介绍
Sep 10 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
自定义PC微信扫码登录样式写法
Dec 12 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 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
关于IIS php调用com组件的权限问题
2012/01/11 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
php从给定url获取文件扩展名的方法
2015/03/14 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
利用jquery包将字符串生成二维码图片
2013/09/12 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
2018/10/09 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
python直接访问私有属性的简单方法
2016/07/25 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
python 内置模块详解
2019/01/01 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
十月份红领巾广播稿
2014/01/22 职场文书
2015世界地球日活动总结
2015/02/09 职场文书