使用Ajax的post方式提交表单后，变成get方式

最新推荐文章于 2023-04-01 10:36:53 发布

angelasp

最新推荐文章于 2023-04-01 10:36:53 发布

阅读量1k

点赞数

分类专栏： java 前端开发文章标签：大数据

本文链接：https://blog.csdn.net/Angel_asp/article/details/125683981

版权

java 同时被 2 个专栏收录

65 篇文章 6 订阅

订阅专栏

前端开发

10 篇文章 0 订阅

订阅专栏

"本文探讨了如何在使用Ajax进行表单提交时，通过阻止`

摘要由CSDN通过智能技术生成

使用$ajax({type: "post" 或者 $.post()方式提交发现地址栏仍然发生改变，查看f12 发现还是使用的get方式提交的参数。

常见的form表单提交方式,我的代码如下：

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>test</title>
    <meta name="keywords" content="test">
    <meta name="description" content="test">
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->
    <link th:href="@{/tools/css/bootstrap.min.css}" rel="stylesheet"/>

</head>
<body class="fixed-sidebar full-height-layout" style="overflow-y:hidden">

<div class="container-fluid bg_color">
        <div class="col-sm-6" id="left_from" style="overflow:scroll;padding-bottom: 20px;">
            <form class="form-horizontal m" id="form-convert-add" name="form-convert-add" >
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">数据库配置</h3>
                    </div>
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">主机IP：</label>
                                    <div class="col-sm-8">
                                        <input id="hostName" name="hostName" class="form-control" type="text"
                                               placeholder="请输入主机IP"
                                               required/>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-4 control-label">端口：</label>
                                    <div class="col-sm-8">
                                        <input id="portNumber" name="portNumber" class="form-control" type="text"
                                               placeholder="请输入数据库端口" required/>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-primary" id="submitBt">提交</button>
                        <button id="stopConvert" class="btn btn-danger" type="button">重置</button>
                    </div>
                </div>
            </form>


        </div>

</div>
<!-- 全局js -->
<script type="text/javascript">

</script>

</body>
</html>

  <form class="form-horizontal m" id="form-convert-add" name="form-convert-add"  onsubmit="return false">
                <div class="panel panel-primary">
                    <div class="panel-heading">

关键点：要在Ajax提交方式中，把提交的按钮上设置 οnsubmit="return false" 阻止默认的提交。否则就会变成默认的提交方式。