JQuery AJAX не удается на сервере POST для Express.js

Question

Основная проблема, кажется, в том, что 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, она отлично работает!

Я использую Chrome 15 в Ubuntu 11. Я также пробовал его с Firefox 9.

Заранее спасибо!

Answer 1

Как ни странно, это было связано с тем, как отправлялась форма.

Я неправильно понял семантику тега <button> и попытался использовать его в своей форме следующим образом:

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

Я создал обработчик событий так:

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

Когда я изменил HTML на

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

, он работал правильно.

Однако мне не совсем понятно, почему это привело к ошибкам. Похоже, что-то связано с тем, что кнопка отправила форму. Если бы кто-то мог мне это объяснить, я был бы признателен.

В любом случае, спасибо за ваши ответы!

Answer 2

Вам необходимо определить атрибут type в элементе button, чтобы он вел себя как тип ввода кнопки, например:

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

Тип кнопки по умолчанию для большинства браузеров - «submit».Однако это не гарантируется, поэтому всегда полезно указывать тип.