通过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 相关文章推荐
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
自动最大化窗口的Javascript代码
May 22 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
JS实现随机化快速排序的实例代码
Aug 01 Javascript
Express的路由详解
Dec 10 Javascript
jQuery数据类型小结(14个)
Jan 08 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
jquery设置css样式的多种方法(总结)
Feb 21 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 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
mysq GBKl乱码
2006/11/28 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
PHP生成器简单实例
2015/05/13 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
Jquery 选中表格一列并对表格排序实现原理
2012/12/15 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
Python import用法以及与from...import的区别
2015/05/28 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
Python编码类型转换方法详解
2016/07/01 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
python实现随机梯度下降法
2020/03/24 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
python和c语言的主要区别总结
2019/07/07 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
临床医学大学生求职信
2013/09/28 职场文书
面料业务员岗位职责
2013/12/26 职场文书
拾金不昧表扬信范文
2014/01/11 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
交通事故委托书范本
2014/09/28 职场文书
MySQL主从切换的超详细步骤
2022/06/28 MySQL