Node.js - отправить форму - PullRequest
       5

Node.js - отправить форму

8 голосов
/ 24 декабря 2011

Я использую node.js и экспресс.Когда я нажимаю кнопку (btnSend), я хочу отправить данные в node.js по экспресс (без обновления страницы).Как отправить данные с помощью jQuery?

<form action="/Send" method="post">
Username: 
<input type="text" name="user" id="txtUser" />
<input type="submit" value="Submit" id="btnSend" />
</form>

1 Ответ

17 голосов
/ 24 декабря 2011

Вот примерный план того, как должен выглядеть ваш jQuery:

$("form").submit(function(e) {
    e.preventDefault(); // Prevents the page from refreshing
    var $this = $(this); // `this` refers to the current form element
    $.post(
        $this.attr("action"), // Gets the URL to sent the post to
        $this.serialize(), // Serializes form data in standard format
        function(data) { /** code to handle response **/ },
        "json" // The format the response should be in
    );
});

Этот фрагмент кода находит все элементы формы на странице и прослушивает событие отправки из них.Форму можно отправить несколькими способами (например, нажав кнопку «Отправить», нажав «Ввод» и т. Д.), Поэтому в целях удобства использования лучше прослушивать события отправки, прямо противоположные прослушиванию кнопки событий нажатия на кнопках отправки..

Когда происходит событие отправки, приведенный выше код сначала предотвращает действия браузера по умолчанию (что, помимо прочего, обновляет страницу), вызывая e.preventDefault.Затем он использует $. Post для отправки данных формы по URL-адресу, указанному в атрибуте действия.Обратите внимание, что $.fn.serialize используется для сериализации данных формы в стандартном формате.

Ваш экспресс-код должен выглядеть примерно так:

var express = require('express')
  , app = express.createServer();

app.use(express.bodyParser()); // Automatically parses form data

app.post('/Send', function(req, res){ // Specifies which URL to listen for
  // req.body -- contains form data
});

app.listen(3000);

Документация поexpress.bodyParser немного редок, но после небольшого разбора кода похоже, что он использует node-querystring под обложками.

Надеюсь, это поможет!

...