源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 61|回复: 18

[JavaScript] 通过button将form表单的数据提交到action层的实例

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2017-9-8 09:16:33 | 显示全部楼层 |阅读模式
下面小编就为大家带来一篇通过button将form表单的数据提交到action层的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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层的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

回复

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-11-26 08:00:56 | 显示全部楼层
啦啦啦啦啦德玛西亚
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-12-2 20:17:19 | 显示全部楼层
给爸爸爸爸爸爸爸爸爸爸八佰伴八佰伴
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-3-26 00:27:21 | 显示全部楼层
啦啦啦啦啦啦哈哈哈
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

381

积分

中级会员

Rank: 3Rank: 3

积分
381
发表于 2023-8-20 11:26:06 | 显示全部楼层
强烈支持楼主ing……
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

316

积分

中级会员

Rank: 3Rank: 3

积分
316
发表于 2023-11-9 11:43:11 | 显示全部楼层
啊,数码撒飒飒飒飒
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-2-29 10:24:00 | 显示全部楼层
看看看看看看看看看看看看看看看看看看看看看看看看看看看
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-3-17 21:13:26 | 显示全部楼层
加快速度很快就撒谎
回复 支持 反对

使用道具 举报

6

主题

2万

回帖

247

积分

中级会员

Rank: 3Rank: 3

积分
247
发表于 2024-6-8 10:38:28 | 显示全部楼层
加快速度很快就撒谎
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

68

积分

注册会员

Rank: 2

积分
68
发表于 2024-6-12 20:16:44 | 显示全部楼层
刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-22 03:38 , Processed in 0.073202 second(s), 24 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表