通过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 常用函数
Dec 30 Javascript
JavaScript Event学习第九章 鼠标事件
Feb 08 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
angular十大常见问题
Mar 07 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
JS实现将对象转化为数组的方法分析
Jan 21 Javascript
Express结合Webpack的全栈自动刷新
May 23 Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 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
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
JqGrid web打印实现代码
2011/05/31 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
为什么称python为胶水语言
2020/06/16 Python
中国一家专注拼团的社交购物网站:拼多多
2018/06/13 全球购物
物理教师自荐信范文
2013/12/28 职场文书
劳资协议书范本
2014/04/23 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
大专护理专业自荐信
2015/03/25 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书