Question

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

（HTML）

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

（JavaScript的）

 $('#enabledForm').submit()

此工作正常，数据按预期传递到表单操作网址 ，但浏览器会重定向到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：

如果客户端是用户代理，它不应该从导致请求发送的文档视图中更改它。

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

在Catalyst中，它将类似于：

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

在PHP中它将是：

http_response_code(204);

有许多 Ajax教程，所以我不打算提供另一个。 jQuery文档有a detailed section on Ajax。

请注意，由于您跨越起源（不同的端口），因此您需要规避同源策略。标准的方法是使用CORS。

Answer 2

发送表单会自动更改您的浏览器URL（和刷新视图）。您应该使用Ajax请求向您的服务器发送信息并最终检索完成（成功，错误，信息......）。

提取您的输入＆＃39;通过Jquery向对象赋值，并通过Jquery.post或Jquery.get

发送您的请求

$('#enabledForm').submit(function (event) {
  //Prevent natual post
  event.preventDefault();

  //Retrieve inputs values
  var data = {}
  $('#enabledForm input,textarea').each(function(index){
    data[$(this).attr('name')] = $(this).val();
  });

  //Send request
  $.post('http://example.com:3999/updateEnabled',data,function(response){
    //Parse response if you want to inform user about success of operation
  });
});

我不知道val()是否适用于所有输入，但它很容易适应......

jQuery submit preventDefault

2 个答案: