通过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与js函数冲突的两种解决方法
Sep 09 Javascript
采用call方式实现js继承
May 20 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
Jun 08 Javascript
区分vue-router的hash和history模式
Oct 03 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调用三种数据库的方法(2)
2006/10/09 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
学习python (1)
2006/10/31 Python
python通过socket查询whois的方法
2015/07/18 Python
python更新列表的方法
2015/07/28 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
python颜色随机生成器的实例代码
2020/01/10 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
人力资源管理专业应届生求职信
2013/09/28 职场文书
自荐信需注意事项
2014/01/25 职场文书
社团招新策划书
2014/02/04 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
集中采购方案
2014/06/10 职场文书
植树造林的宣传标语
2014/06/23 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python
python小型的音频操作库mp3Play
2022/04/24 Python