JQuery пост данных

Question

У меня есть этот код JS:

var recipesPost = function(name, ingredients, steps) {
    $.post('/api/recipes',
        {
            name: name,
            ingredients: ingredients,
            steps: steps
        }
    ).done(function(data) {
        $("#result").append("RECIPES POST: OK!<br/>" + JSON.stringify(data) + "<br/>");
    }).error(function(error) {
        $("#result").prepend(JSON.stringify(error));
    });
};

К сожалению, HTTP-запрос не содержит моих данных. Он содержит две пустые переменные (steps и ingredients), а name нигде не отображается. Вот необработанный запрос:

POST http://XXXXXXXXX.com/api/recipes HTTP/1.1
Host: XXXXXXXXX.com
Connection: keep-alive
Referer: http://XXXXXXXXX.com/
Content-Length: 19
Origin: http://XXXXXXXXX.com
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.68 Safari/534.24
Content-Type: application/x-www-form-urlencoded
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3

ingredients=&steps=

Есть идеи о том, что может происходить? Странно, что если я заменю отправляемые данные строковыми литералами, то они будут отправлены правильно:

{
    name: "Foo",
    ingredients: "Bar",
    steps: "FooBar"
}

Я уже проверил с помощью отладчика JS, что переменные name, ingredients и steps содержат действительные данные, когда происходит вызов recipesPost.

Обновление : Рейгл предложил мне позвонить recipesPost("Foo", "Bar", "FooBar"). Это сработало.

Я только что снова отладил, и хотя тип моих параметров String (с моим исходным кодом), у них есть метод toJSON. Я передаю данные из формы, используя JQuery, например $('#recipe_name').attr('value') (recipe_name является вводом HTML). Это неправильный способ сделать это?

Вот вызывающий HTML

<form>
    Name: <input id="recipe_name" type="text" /><br/>
    Ingredients: <textarea id="recipe_ingredients"></textarea><br/>
    Steps: <textarea id="recipe_steps"></textarea><br/>
    <button type="button" onclick="recipesPost($('#recipe_name').attr('value'),$('#recipe_ingredients').text(),$('#recipe_steps').text())">Send</button>
</form>

Answer 1

Редактировать: в разговоре с операцией проблема была с версией JQuery Обновление до 1.6.1 решило проблему.

Попробуйте процитировать ваши ключевые имена:

    {
        'name': name,
        'ingredients': ingredients,
        'steps': steps
    }

Answer 2

$('#recipe_name').attr('value') - неправильный способ сделать это ИМО.

вы можете использовать,

• .val()
• .prop()

более правильный способ сделать ваш текущий код - это,

Измени свой HTML

<form>
    Name: <input id="recipe_name" type="text" /><br/>
    Ingredients: <textarea id="recipe_ingredients"></textarea><br/>
    Steps: <textarea id="recipe_steps"></textarea><br/>
    <button type="submit" id="send">Send</button>
</form>

где-то на вашем js do

$('#send').click(function(e){
    var rn = $('#recipe_name').val(),
        ri = $('#recipe_ingredients').val(),
        rs = $('#recipe_steps').val();

    recipesPost(rn,ri,rs);

    e.preventDefault();
});

Answer 3

Что в вашем имени переменная / значение сообщения? Вы пробовали предупреждение перед вашим $.post, чтобы убедиться, что есть значение для каждой из переменных, которые вы используете?