javascript - jQuery 提交阻止默认值

Question

我在端口 80 上从 example.com 加载页面，然后从加载的页面将表单提交到不同端口上的同一服务器(如表单操作属性中所定义)。

(html)

<form id="enabledForm" action="http://example.com:39991/updateEnabled" method="POST">

(javascript)

 $('#enabledForm').submit()

这工作正常，数据按预期传递到表单操作 URL，但是浏览器被重定向到 POST 请求的地址，而不是停留在请求页面上。

如果我使用

$('#enabledForm').submit(function (event) {
    event.preventDefault();
});

或

$('#enabledForm').submit(function (event) {
    return false;
});

然后服务器没有收到任何数据，但页面未重定向。如果我在事件处理程序中添加警报，则不会显示警报。

$('#enabledForm').submit(function (event) {
    alert('inside submit event handler');
    return false;
});

显然我做错了，但经过几个小时的努力并尝试了我能想到的一切之后，我陷入了困境。

要做什么？

Answer 1

这里有两个基本选项:

• 让服务器返回 204 No Content 响应并完全忘记使用 JS
• 阻止用JS提交表单，而是用Ajax将数据发送到URL

<小时/>

No content :

If the client is a user agent, it SHOULD NOT change its document view from that which caused the request to be sent.

如何设置 HTTP 响应状态代码取决于您的服务器端语言/框架。例如:

在 Catalyst 中，它会是这样的:

$c->response->status(204);

在 PHP 中，它是:

http_response_code(204);

<小时/>

有很多 Ajax 教程，所以我不会再提供一个。 jQuery 文档有 a detailed section on Ajax .

请注意，由于您是跨源(不同端口)工作，因此您需要规避同源策略。标准方法是使用 CORS .