通过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的一个扩展form序列化到json对象
Dec 09 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
jquery获取复选框checkbox的值实现方法
May 30 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
Vue数组更新及过滤排序功能
Aug 10 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 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求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
PHP实现的简单mock json脚本分享
2015/02/10 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
jquery 简单导航实现代码
2009/09/11 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
JQuery显示、隐藏div的几种方法简明总结
2015/04/16 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
python使用scrapy解析js示例
2014/01/23 Python
python通过shutil实现快速文件复制的方法
2015/03/14 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
python set内置函数的具体使用
2019/07/02 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
医学院校毕业生自荐信范文
2014/01/01 职场文书
服装电子商务创业计划书
2014/01/30 职场文书
档案保密承诺书
2014/06/03 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
python opencv旋转图片的使用方法
2021/06/04 Python
Java异常处理try catch的基本用法
2021/12/06 Java/Android