Javascript 有没有办法提交一份'；在同一窗口中通过ajax从单独的页面加载？

我有以下表格：

<form method="post" action="/cart" id="ajax">
  {...}
  <div>
  {{ product.option | hidden_option_input }}
  </div>
  <button name="submit" type="submit" title="add to cart">Add to Cart</button>
</form>

{...}
{{product.option | hidden_option_input}
添加到购物车

表单通过ajax加载到页面，其操作页面也通过ajax在导航栏中的不同链接中预加载。我想提交表单，但在提交时阻止它打开新页面。我该怎么办？我试过：

<a href="/cart" class="new_popup mfp-ajax" onclick="this.parentNode.submit();return false;">Add to Cart</a>

---

替换按钮，但即使我尝试用“return false”否定默认行为，它仍然会在单击时重新加载一个新页面。我可以在加载新页面之前看到链接的弹出窗口，但在新页面出现之前它不会提交。我相信这是因为当用户单击链接时，表单是通过ajax加载的，因此我无法将脚本附加到表单上，因为在它出现在屏幕上之前，它在技术上是不存在的。

如果我理解您的问题，您希望只更新当前页面的一部分。如果是这样，您将不得不使用AJAX来实现：

保留“提交”按钮，但使其成为标准按钮，并为其提供一个id，如“提交”：

添加到购物车

然后JavaScript将按如下方式处理按钮上的单击事件：

$(function() {
    let submit = $('#submit');
    submit.click( function() { //
        submit.prop('disabled', true); // prevent a re-submission
        var form = $('#ajax');
        var request = $.ajax({
            url: form.attr('action'), // get the action from the form
            type: form.attr('method'), // get the method from the from
            dataType: 'html', // the assumption is that we are dealing HTML here
            data: form.serialize()
        });

        request.done(function(ajaxResult) {
            // update the DOM with the results
            $('#some_div').html(ajaxResult); // replace contents of <div id="some_div"></div> with new html
            submit.prop('disabled', false); // re-enable the submit
        });

    });
});

$（函数（）{
让提交=$（“#提交”）；
提交。单击（函数（）{//
submit.prop（'disabled'，true）；//防止重新提交
var form=$（'#ajax'）；
var请求=$.ajax({
url:form.attr（'action'），//从表单获取操作
类型：form.attr（'method'），//从
dataType:'html'，//假设我们在这里处理html
数据：form.serialize（）
});
请求完成（函数（ajaxResult）{
//用结果更新DOM
$（'#some_div'）.html（ajaxResult）；//用新的html替换的内容
submit.prop（'disabled'，false）；//重新启用提交
});
});
});

您必须安排返回的结果仅为需要更新的HTML

更新

---

自从回复后，你添加了一条评论，其中的链接表明我可能误解了你的意图。您使用的短语“提交表单，但在提交时阻止它打开新页面”肯定会导致我的原始解释。

您的期望有点不清楚。你有一个提交按钮，但你也有这个锚也提交。您可以通过委托将事件处理程序附加到尚不存在的元素；看，我现在正试图通过类似的方法来实现这一点。我使用的插件需要我利用什么是打开新页面？表单，Ajax调用？它只是表单在提交时打开一个新页面。我找到了一种方法，通过将单击事件委托给提交链接来提交它，如：

$（document）.on（'click'，'new_popup'，function（）{$（'form'）.ajaxSubmit（）；return false；}）这肯定是我的错，因为我的措辞不好，但这仍然有很大帮助。我现在有一个功能可以正常工作，但是当弹出窗口关闭时，我仍然需要处理一个请求，并且（我假设）我需要您的方法来完成这项工作
$(function() {
    let submit = $('#submit');
    submit.click( function() { //
        submit.prop('disabled', true); // prevent a re-submission
        var form = $('#ajax');
        var request = $.ajax({
            url: form.attr('action'), // get the action from the form
            type: form.attr('method'), // get the method from the from
            dataType: 'html', // the assumption is that we are dealing HTML here
            data: form.serialize()
        });

        request.done(function(ajaxResult) {
            // update the DOM with the results
            $('#some_div').html(ajaxResult); // replace contents of <div id="some_div"></div> with new html
            submit.prop('disabled', false); // re-enable the submit
        });

    });
});