JQuery ajax 在 POST 到 express.js 服务器时失败答案

【问题标题】：JQuery ajax fails on POST to express.js serverJQuery ajax 在 POST 到 express.js 服务器时失败
【发布时间】：2012-02-03 22:40:59
【问题描述】：

主要问题似乎是 jQuery 在 AJAX 请求中发送了以下标头：

POST http://localhost:3000/enter HTTP/1.1

，虽然它应该是

POST /enter HTTP/1.1

更详细地说，这是我的服务器和客户端的设置方式以及确切的请求和响应：

我有一个非常简单的设置，服务器上的express.js 和客户端上的jQuery。我只需要向服务器发出 POST 请求。

这或多或少是服务器的样子：

app.post('/enter', function(req, res){
 console.log(req.body)
 res.json({flag: true})
})

这是 jQuery 的样子：

$.ajax(
 { url: '/enter'
 , type: 'POST'
 , cache: false
 , data:
    { field1: 1, field2: 2 }
 , success: function(data){
    alert('Success!')
   }
 , error: function(jqXHR, textStatus, err){
    alert('text status '+textStatus+', err '+err)
   }
})

果然，服务器的console.log 确认了正确的数据。我在 AJAX 之后收到的警报消息只是 text status error err。

Chrome 告诉我请求标头是：

POST http://localhost:3000/enter HTTP/1.1
Origin: http://localhost:3000
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (X11; Linux i686) AppleWebKit/535.2 (KHTML, like Gecko) Ubuntu/11.10 Chromium/15.0.874.106 Chrome/15.0.874.106 Safari/535.2
Content-Type: application/x-www-form-urlencoded
Accept: */*
Referer: http://localhost:3000/?

对该请求的响应是：

HTTP/1.1 0 undefined

我还使用 telnet 来了解情况。在 telnet 中，我看到响应是：

404 Not Found
X-Powered-By: Express
Content-Type: text/plain
Connection: keep-alive
Transfer-Encoding: chunked

28
Cannot POST /http://localhost:3000/enter
0

所以问题似乎出在POST http://localhost:3000/enter HTTP/1.1 这一行。如果我发送标题时将该行更改为POST /enter HTTP/1.1，它会完美运行！

我在 Ubuntu 11 上使用 Chrome 15。我也在 Firefox 9 上尝试过。

提前致谢！

【问题讨论】：

你可以试试res.json({flag: true}, 200); 吗？由于某种原因，状态码似乎没有默认为 200。
我试过了，但我得到了相同的结果：/。这似乎是 jQuery 或 XHR 请求有问题的页面的方式。
jquery 脚本是否在同一个域和端口上运行？
您是否在 res 对象上调用任何其他方法或将其传递给任何其他库？一定是某处将 statusCode 设置为 undefined。
不，这是唯一触及res 对象的代码。我知道服务器可以正常工作，因为 Telnet 可以正常工作，所以问题一定是 jQuery 或 XHR 调用它的方式（因为它请求 POST http://localhost:3000/enter 而不是 POST /enter）。

标签： jquery ajax node.js express

【解决方案1】：

奇怪的是，这似乎与表单的提交方式有关。

我误解了<button> 标签的语义，并尝试在我的表单中使用它：

<form>
 <button id="enter">Enter</button>
</form>

我创建了这样的事件处理程序：

$('#enter').click(function(){ /* AJAX stuff... */ })

当我将 HTML 更改为

<form>
 <input type="button" id="enter" value="Enter">
</form>

，它工作正常。

但是，我并不完全清楚它为什么会产生错误。这似乎与按钮提交表单的事实有关。如果有人可以向我解释这一点，我将不胜感激。

无论如何，谢谢您的回复！

【讨论】：

【解决方案2】：

您需要在按钮元素中定义 type 属性，使其表现得像按钮输入类型，如下所示：

<button id="enter" type="button">Enter</button>

大多数浏览器的默认按钮类型是“提交”。但是，这并不能保证，因此指定类型始终是一个好主意。

【讨论】：