通过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 相关文章推荐
用jscript实现新建和保存一个word文档
Jun 15 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
js和C# 时间日期格式转换的简单实例
May 28 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
vue-dialog的弹出层组件
May 25 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
webpack结合express实现自动刷新的方法
May 07 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 字符串压缩方法比较示例
2014/01/23 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
PHP使用curl模拟post上传及接收文件的方法
2016/03/04 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
JS实现图片切换特效
2019/12/23 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
opencv与numpy的图像基本操作
2019/03/08 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
Python 词典(Dict) 加载与保存示例
2019/12/06 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
英国家用电器购物网站:Hughes
2018/02/23 全球购物
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
Python如何实现单例模式
2016/06/03 面试题
便利店投资创业计划书
2014/02/08 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
实践论读书笔记
2015/06/29 职场文书
Python天气语音播报小助手
2021/09/25 Python