Передача данных на сервер и асинхронное обновление

Question

Обычно у меня есть сайт, на котором я хочу, чтобы пользователь что-то ввел, чтобы он отправлялся на сервер для обработки, а затем возвращал его асинхронно, загружал содержимое в div и затем увеличивал его с помощью jQuery.Каков наилучший способ сделать это?

В настоящее время вот мое "решение":

$(document).ready(function () {
    $('#output-box').hide();
    $('#form1').submit(function () { 
        $.ajax({
            type: "POST",
            url: "Default.aspx/ParseData",
            data: "{ $('#txtInput').val() }",
            success: function (msg) {
                $('#output-box').text(msg).fadeIn();
            }
        });
        return false;
    });
});

Это не работает - просто возвращает содержимое Default.aspx.Итак, как мне правильно отправить содержимое #txtInput в функцию ParseData в Default.aspx.vb?Кроме того, это лучший способ сделать что-то подобное?Нужно ли мне даже использовать jQuery для отправки данных или просто вызвать функцию и заставить ее захватывать данные на стороне сервера, вставлять информацию в результат div и затем показывать ее с помощью jQuery?

Кроме того, я нашел похожие вопросы (и сам задавал аналогичный вопрос), но пока не смог заставить его работать ..

Answer 1

В дополнение к другим предложениям вам нужно установить contentType application/json для запроса.Вам также необходимо установить тип данных json, чтобы убедиться, что jQuery правильно интерпретирует ответ.

$.ajax({
  type: 'POST',
  url: 'Default.aspx/ParseData',
  data: '{ "strUserInput" : ' + $('#txtInput').val() + ' }',
  dataType: 'json',
  success: function (msg) {
    // If ASP.NET 2.0:
    $('#output-box').text(msg).fadeIn();

    // If ASP.NET 3.5+:
    $('#output-box').text(msg.d).fadeIn();
  }
});

См. Этот пост для получения дополнительной информации о проблеме .d: http://encosia.com/2009/02/10/a-breaking-change-between-versions-of-aspnet-ajax/

Метод на стороне сервера должен быть определен следующим образом:

[WebMethod]
public static ParseData(string strUserInput)
{
  return "Message";
}

В этом посте все довольно хорошо: http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

Answer 2

Мне кажется, все в порядке, но вы можете попробовать изменить строку:

data: "{ $('#txtInput').val() }",

до

data: $('#txtInput').val(),

Answer 3

изменить это

data: "{ $('#txtInput').val() }",

до

data: $('#txtInput').val(),