前后端交互之使用ajax方法实现form表单的提交

静默安然

已于 2022-02-15 18:17:02 修改

阅读量1.8w

点赞数 10

分类专栏： Spring cloud JAVA 文章标签：交互前端

于 2022-02-15 17:58:43 首次发布

原文链接：https://www.cnblogs.com/han-1034683568/p/7199168.html

版权

Spring cloud 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

JAVA

1 篇文章 0 订阅

订阅专栏

转载于：使用ajax方法实现form表单的提交 - 程序员十三 - 博客园 (cnblogs.com)

οnsubmit=“reutrn false”：表示禁止表单提交。

data: $('#addTaskform').serialize(),序列化提交表单数据。

不要忘记引用js文件

<script  type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js">
  </script>

一、使用form提交数据

1.前后端完全分离，单独测试后端，可以直接使用form提交。

form表单提交，主要action标明跳转的地址，type的类型要是submit。

此种方法是交给后端处理数据传递成功后页面的跳转。

前端代码

<form  action="/addMergeTask" method="get">
    任务名称:<input type="text" name="taskName" /><br>
    源数据库连接名:<input type="text" name="srcLink" /><br>
    目标数据库连接名:<input type="text" name="tarLink" /><br>
    源数据表:<input type="text" name="srcTable" /><br>
    目标数据表:<input type="text" name="tarTable" /><br>
    <input type="submit" value="提交">
</form>

后端代码

 @RequestMapping(path = "/addMergeTask",method = RequestMethod.GET)
    @ResponseBody
    public Result<Integer,Object> addmergeTask(@RequestParam("taskName") String taskName,@RequestParam("srcLink") String srcLink,@RequestParam("tarLink") String tarLink,@RequestParam("srcTable") String srcTable,@RequestParam("tarTable") String tarTable){
        boolean res= mergeTaskService.addmergeTask(taskName,srcLink,tarLink,srcTable,tarTable);
        int status=res? RequestResCodeConst.SUCCESS:RequestResCodeConst.FAILURE;
        String message=res?"发布成功":"发布失败";
        return new Result<>(status,message);
    }

二、使用ajax提交数据，前端实现页面跳转

在常用方式中，点击的登录按钮的type为"submit"类型，此处为button类型；
在常用方式中，form的action不为空,此处为空。
ajax方式中需要注意的是$.ajax方法中的参数：dataType和data。
data可以使用.serialize序列化提交

呈现效果

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script  type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js">
</script>
  <script type="text/javascript">
         function login(){
            $.ajax({
            //几个参数需要注意一下
                dataType: "json",
                url: "http://localhost:8080/addLink" ,
                data: $('#form1').serialize(),
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.status == 200) {
                        alert(result.message);
                    }
                },
                error : function() {
                    alert("异常！");
                }
            });
        }
    </script>
</head>
<body>

<div id="form-div">
  <form id="form1" onsubmit="return false" action="##" >
    连接名:<input type="text" name="linkName" /><br>
    IP地址:<input type="text" name="linkAdd" /><br>
    数据库类型:<input type="text" name="linkType" /><br>
    端口号:<input type="text" name="portName" /><br>
    用户名:<input type="text" name="userName" /><br>
    密码:<input type="password" name="psw" /> <br>
    数据库:<input type="text" name="dataBaseName" /> <br>
    <input type="button" value="提交" onclick="login()">
  </form>
</div>

</body>
</html>

后端代码

 @RequestMapping(path="/addLink",method = RequestMethod.GET)
    @ResponseBody
    public Result<Integer,Object> addLink(@RequestParam("linkName") String linkName,@RequestParam("linkAdd") String linkAdd, @RequestParam("linkType") String linkType, @RequestParam("portName") String portName, @RequestParam("userName") String userName, @RequestParam("psw") String psw,@RequestParam("dataBaseName") String dataBaseName){
        boolean res= dataBaseService.addLink(linkName,linkAdd,linkType,portName,userName,psw,dataBaseName);
        int status=res? RequestResCodeConst.SUCCESS:RequestResCodeConst.FAILURE;
        String message=res?"发布成功":"发布失败";
        return new Result(status,message);
    }