js提交form表单不跳转

在使用JavaScript提交表单时，如果不希望页面发生跳转，可以采用以下方法：

基本概念

传统的表单提交（通过<form>标签的action属性和method属性）会导致页面刷新或跳转到另一个页面。为了避免这种情况，可以使用JavaScript来拦截表单提交事件，并通过AJAX（Asynchronous JavaScript and XML）技术来异步提交数据。

优势

用户体验：页面不会刷新，用户可以继续与页面交互。
性能：减少了不必要的页面加载，提高了响应速度。
灵活性：可以在提交数据的同时执行其他操作，如显示加载动画、验证数据等。

类型

XMLHttpRequest：传统的AJAX技术。
Fetch API：现代浏览器支持的更简洁的AJAX技术。
第三方库：如jQuery的$.ajax方法。

应用场景

实时搜索建议
分页加载数据
表单验证和提交
动态内容更新

示例代码

以下是使用Fetch API和XMLHttpRequest的示例代码：

使用Fetch API

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Submission with Fetch API</title>
</head>
<body>
    <form id="myForm">
        <input type="text" name="username" placeholder="Username">
        <button type="submit">Submit</button>
    </form>

    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止默认的表单提交行为

            const formData = new FormData(this);

            fetch('/submit-form', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
                // 处理成功响应
            })
            .catch((error) => {
                console.error('Error:', error);
                // 处理错误
            });
        });
    </script>
</body>
</html>

使用XMLHttpRequest

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form Submission with XMLHttpRequest</title>
</head>
<body>
    <form id="myForm">
        <input type="text" name="username" placeholder="Username">
        <button type="submit">Submit</button>
    </form>

    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止默认的表单提交行为

            const formData = new FormData(this);
            const xhr = new XMLHttpRequest();

            xhr.open('POST', '/submit-form', true);
            xhr.onload = function () {
                if (xhr.status === 200) {
                    console.log('Success:', JSON.parse(xhr.responseText));
                    // 处理成功响应
                } else {
                    console.error('Error:', xhr.statusText);
                    // 处理错误
                }
            };
            xhr.onerror = function () {
                console.error('Error:', xhr.statusText);
                // 处理错误
            };
            xhr.send(formData);
        });
    </script>
</body>
</html>

可能遇到的问题及解决方法

跨域问题：如果表单提交的目标URL与当前页面不在同一个域，可能会遇到跨域问题。可以通过CORS（跨域资源共享）来解决。
数据格式问题：确保服务器端能够正确解析提交的数据格式（如JSON、表单数据等）。
错误处理：在AJAX请求中添加错误处理逻辑，以便在请求失败时能够及时响应。

通过以上方法，可以实现不跳转页面的表单提交，并提升用户体验和应用性能。

页面内容是否对你有帮助？

有帮助

没帮助

Javascript警报

我使用警告框来警告用户在提交我正在处理的网站上的表单时出现错误，但每次我单击“确定”按钮关闭警告框时，页面都会回到顶部，我需要再次向下滚动才能看到该表单。

浏览 1提问于2010-01-07得票数 0

回答已采纳

2回答

PHP:打印文本而不必转到页面顶部

、、、

如果用户不编译一些输入，就会出现错误。问题是，此表单位于jQuery切换的div中。当需要显示一条消息时(wheter是一条强制字段或已发送电子邮件的错误消息)，用户将被重定向到页面的顶部，切换的div (表单所在的div)返回到可见性:隐藏。

浏览 3提问于2013-10-06得票数 0

回答已采纳

2回答

Listengin格式提交- Javascript

、、、

每当用户提交表单时，我都会收听该表单。我有两种方式提交我的表格。单击提交的表单提交表单当我单击要提交的表单按钮时，侦听器在File1.js中检测到它，但当用户单击li以使函数items_sold(event);执行时，表单提交，但侦听器不执行<form class="shop_<e

浏览 0提问于2020-07-03得票数 1

回答已采纳

3回答

HTML表单所需的命令不起作用？

、、、

我正在尝试让我的表单要求在提交表单之前填写某些字段。，发现命令应该是这个简单的命令但是由于某些原因，在我的表单上，即使指定的字段没有填写，它也会提交它。我甚至尝试在Dreamweaver中用一个新的表单创建一个全新的文件，只有一个必需的输入项和

浏览 3提问于2013-09-05得票数 0

3回答

提交时跳转到锚点

、

提交表单后，我想跳转到锚点标记。这个是可能的吗？我的简化形式如下所示 <input type="text" value="Search" />我希望它跳转到锚点或

浏览 2提问于2013-05-16得票数 1

2回答

为什么我会得到一个“？”在使用useHistory().push('/')后在链接末尾进行标记

、、、

我正在尝试在提交表单时跳转到另一个链接。这就是我使用useHistory()的原因。但是，每当我提交表单时，它会将我带到链接，但我得到的却是一个“？”在最后做个记号。因此，当我在netlify中部署它时，我得到了'PAGE NOT link‘，因为它与链接不匹配，因为我的链接末尾没有问号。那么，我如何删除“？”在导航链接之后做标记？const history = useHistory(); history.push

浏览 5提问于2020-10-04得票数 0

2回答

停止提交表单的Javascript

、

如果Javascript被关闭，是否有可能阻止表单被提交？我知道你可以做隐藏表演的事。但是，如果Javascript被关闭，是否有可能确保表单无法提交？

浏览 9提问于2017-02-16得票数 0

回答已采纳

2回答

在Chrome中，表单不包含两个字段

、、、、

我最近一直在使用html + js + css，在chrome和firefox中发现了一个非常奇怪的问题。<html><meta charset=utf-8 /></head> <

浏览 7提问于2014-01-15得票数 0

2回答

如何从验证脚本PHP/ jQuery的action=“第三方位置”执行

、、、

此表单有一个action属性，用于将表单数据发送到epay。问题是，我需要先验证这个表单数据，然后才能将其发送到支付宝。有没有什么方法可以让我从验证脚本执行表单操作？表单id用于捕获使用jQuery提交的表单，并开始验证数据。<form id="ajax-payment-form" action="url to payment company site">特

浏览 0提问于2014-10-25得票数 0

4回答

是否可以仅使用JS创建表单？

、

我正在尝试创建一个只使用JavaScript的表单。我的意思是为网页创建一个表单，向其中添加元素，设置它们的值，然后提交表单。此外，如果浏览器中禁用了JavaScript，则应该提交普通的HTML表单。有什么方法可以做到这一点吗？

浏览 5提问于2009-10-29得票数 0

回答已采纳

3回答

防止浏览器在提交表单时跳转到首页

、、

当用户提交表单时，我试图防止页面跳转到顶部。有很多人建议使用return false。但是，它也会阻止表单的提交。 return false; $('form').submit(function(){ //doesn't work

浏览 0提问于2012-03-08得票数 4

回答已采纳

1回答

如何在文本仍然为空时关闭Bootstrap加载按钮

、、、

请帮助我想关闭引导加载按钮，而我的文本框仍然是空的，用户需要填充所有文本框才能使用提交按钮将文本更改为加载<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script

浏览 1提问于2014-06-17得票数 0

2回答

停止从javascript提交表单

、、

我已经为问题准备了这个演示<form action=test id=form></form>

浏览 1提问于2015-02-22得票数 1

回答已采纳

1回答

控制jquery验证“跳转”位置

、

在表格的底部(在tfoot中)是一个"compare“按钮，用于提交用户的选择并向他们显示其产品的比较。它只对用户比较2-3个产品有意义，所以我添加了jquery验证来控制这一点。这很有效，但有一个问题:验证插件似乎会使页面“跳”回到表单的开头，表单的开头从表格的顶部开始。这是不可取的，我宁愿只看到错误消息显示，而不发生任何其他事情。有没有一种方法可以覆盖这种跳转行为并防止它发生？="post" id="series-comparison-form" c

浏览 1提问于2011-04-16得票数 1

回答已采纳

3回答

Rails 3.1无需刷新即可提交表单

、、

我的orders/_form.html.erb上有一个表单，我想提交它并保存在一个名为Categories的表中首先，我如何使它在您提交表单时不刷新页面

浏览 3提问于2012-04-11得票数 2

回答已采纳

2回答

提交按钮提交错误的表单

、

我在同一页上有两个表格，如下所示： <form id="patients_form" name="patients_form" action="<?" name="physicians_form" action="<

浏览 9提问于2014-11-12得票数 3

回答已采纳

2回答

需要学习javaScript表单验证！

我想学习一点关于javaScript表单验证(编码和理论)，你给我的教程链接(除了w3schools)。并确保我不会深入学习，因为我只需要为了考试目的而学习，而不是为了我的功能使用。

浏览 7提问于2011-03-04得票数 0

回答已采纳

2回答

希望HTML按钮发送带有输入详细信息的电子邮件

、、、、

<form action="mailto:myemail@email.com" class="form-inline"> <label for="subscriberName">name</label> <input type="text" name="subscriberName" class

浏览 3提问于2016-09-17得票数 2

2回答

角2/4:如何在第一次ajax提交的回调中通过组件发布HTML表单(而不是ajax)？

、、、

我想通过POSTing (非Ajax)向外部站点提交表单中的输入字段(非Ajax)，在跳转到外部页面之前，它也提交了一个角度错误的控制台。我在HTML中使用了以下代码(模板) <form (submit)="onSubmit($event)" method="POST" [formGroup]="form" *ngIf='form' actionthis.form.

浏览 0提问于2018-03-23得票数 7

1回答