通过button将form表单的数据提交到action层
form表单中不需要写action的路径,需要给form表单一个唯一的id,将你要提交的信息的表单中的标签name="action中的javabean对象.javabean属性"。给button按钮添加一个onclick()点击事件,并实现该点击事件,在该onclick()方法中通过ajax将form表单中的数据提交给action层
JSP页面中的代码:
1 <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层中的代码:
1 @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代码:
1 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层的更多相关文章
- form表单Get方式提交时,action中带参数传递不了
<form action="getPostServlet/getPost.do?param4=param4" method="get"> <i ...
- django做form表单的数据验证
我们之前写的代码都没有对前端input框输入的数据做验证,我们今天来看下,如果做form表单的数据的验证 在views文件做验证 首先用文字描述一下流程 1.在views文件中导入forms模块 2. ...
- jquery序列化form表单使用ajax提交后处理返回的json数据
1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...
- form表单序列化数据之后,追加额外数据
form表单序列化数据之后追加额外数据多使用在js中,下面是追加额外数据的代码: <span style="font-size:18px;">$.param({'inv ...
- 防止表单提交时刷新页面-阻止form表单的默认提交行为
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
- C# 模拟提交 Form表单的数据
用 HttpWebRequest Post方法模拟提交Form表单数据时,需要设置 ContentType 为 "application/x-www-form-urlencoded" ...
- Laravel Form 表单的数据校验
例如,要使用手机号加验证码的方式提供登录网站的功能,那么在处理前端提交的 form 表单时,就不得不对提交的手机号及验证码做基本的数据校验. 手写规则,非常浪费时间.使用 laravel 内置的 va ...
- 浏览器原生 form 表单POST 数据的两种方式
我们在提交表单的时候,form表单参数中会有一个enctype的参数.enctype指定了HTTP请求的Content-Type. 常用有两种:application/x-www-form-urlen ...
- JS form 表单收集 数据 formSerialize
做后台系统的时候通常会用到form表单来做数据采集:每次一个字段一个字段的去收集就会很麻烦,网站也有form.js插件可以进行表单收集,并封装成一个对象,通过ajax方法传到后台:现在介绍一种直觉采集 ...
随机推荐
- js实现把多个数据分成3个一组
主要代码: var stuCount = res.data; if (stuCount.length>0){ var objList = new Object(); var arr = new ...
- 分享一个现代的,免费的,简单而有效的编辑器Vis
Vis是一个免费的开源,类似Vi的代码编辑器,它扩展了vi的模态编辑,内置支持使用相同编辑器的基于结构正则表达式的命令语言实现的多个游标/选择.并将其与基于sam结构正则表达式的命令语言相结合. Vi ...
- CSS3 学习笔记(边框 背景 字体 图片 旋转等)
边框 盒子圆角 border-radius:5px / 20%: border-radius:5px 4px 3px 2px; 左上,右上,右下,左下 盒子阴影 box-shadow:box-shad ...
- 廖雪峰Java11多线程编程-3高级concurrent包-1ReentrantLock
线程同步: 是因为多线程读写竞争资源需要同步 Java语言提供了synchronized/wait/notify来实现同步 编写多线程同步很困难 所以Java提供了java.util.concurre ...
- iOS之CGcontext.h方法和属性简介
/* CoreGraphics - CGContext.h Copyright (c) 2000-2012 Apple Inc. All rights reserved. */ #ifndef CGC ...
- GitHub的使用问题记录
1. github如何收藏和关注? github 中的star作用:star 的作用是收藏,目的是方便以后查找. watch 的作用是关注,目的是等作者更新的时候,你可以收到通知.fork 的作用是参 ...
- NOIP2016提高A组 B题 【HDU3072】【JZOJ4686】通讯
题目描述 “这一切都是命运石之门的选择.” 试图研制时间机器的机关SERN截获了中二科学家伦太郎发往过去的一条短 信,并由此得知了伦太郎制作出了电话微波炉(仮). 为了掌握时间机器的技术,SERN总部 ...
- Ionic 图片预览ion-slide-box,ion-slide,ion-scroll实现
1.index.html 代码 <body ng-app="starter"> <ion-pane> <ion-header-bar class=&q ...
- pycharm每次新建项目都要重新安装一些第三方库的解决办法(转载防删)
目前有三个解决办法,也是亲测有用的: 第一个方法:因为之前有通过pycharm的project interpreter里的+号添加过一些库,但添加的库只是指定的项目用的,如果想要用,就必须用之前的项目 ...
- SQL Server 2008 分区函数和分区表
当我们数据量比较大的时候,我们需要将大型表拆分为多个较小的表,则只访问部门数据的查询就可以更快的运行,基本原理就是,因为要扫描的数据变的更小.维护任务(例如,重新生成索引或备份表)也可以更快的运行 ...