通过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 相关文章推荐
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
比较node.js和Deno
Apr 27 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
第六节 访问属性和方法 [6]
2006/10/09 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python使用sqlite3时游标使用方法
2018/03/13 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
解决python运行效率不高的问题
2020/07/20 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
10个顶级Python实用库推荐
2021/03/04 Python
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
Lululemon英国官网:加拿大瑜伽服装品牌
2019/01/14 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
英文版区域经理求职信
2013/10/23 职场文书
网站设计师的岗位职责
2013/11/21 职场文书
给男朋友的道歉信
2014/01/12 职场文书
初婚未育证明
2014/01/15 职场文书
个人投资计划书
2014/05/01 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS