События, не инициируемые при публикации строки json с использованием jquery [duplicate]

0

Я совершенно новичок в этом, поэтому извиняюсь, если я не объясню это правильно.

Я хочу опубликовать некоторые данные в формате json для службы отдыха. Я пытаюсь получить эту работу с JQuery на простой странице.cshtml (бритва).

Моя строка json выглядит так:

{
   "ListRequest":{
      "Values":[
         {
            "Name":"SC",
            "Value":"PRO001"
         },
         {
            "Name":"PC",
            "Value":"Z0R14"
         }
      ]
}

}

Мне нужно передать 2 значения из формы в эту строку, а затем опубликовать ее, но я не уверен, как объявить это в javascript, а затем отправить ее в мою функцию $.post.

Мой HTML выглядит так:

<form action="/" id="getListForm">
    <input type="text" name="txtSC">
    <input type="text" name="txtPC">
    <input type="submit" value="Get List">
</form>

Я думал, что просто объявлю var:

var jsonText = '{"ListRequest":{ "Values":[' +
'{"Name":"SC", "Value":"' + $form.find("input[name='txtSC']").val() + '"},' +
'{"Name":"PC","Value":"' + $form.find("input[name='txtPC']").val() + '"}]}}';

Это правильный способ справиться с этим?

Затем у меня есть код "post" для тестирования:

var posting = $.post( url, term);

posting.done(function (data) {
    var content = $(data).find("#content");
    $("#result").empty().append(content);
});

Но всякий раз, когда я называю это, он помещает эти 2 значения как часть строки запроса вместо того, чтобы делать фактическую запись, где эти данные не видны в URL-адресе.

http://localhost/WebTest/WebDataService.svc/GetList?txtSC=brc001&txtPC=12345

Может кто-нибудь сказать мне, как это исправить?

Благодарю.

ОБНОВИТЬ:

Вот полный код с моей тестовой страницы, поскольку он все еще не работает для меня. Я только заметил, что событие отправки не запускается. Кажется, что текстовое поле и значение автоматически помещаются, потому что они являются частью формы, но мое событие определенно не срабатывает, поскольку я только что прокомментировал весь код и поставил предупреждение ('test'); и он не появился.

Есть идеи?

Благодарю.

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>

<script type="text/javascript">

// Attach a submit handler to the form
$("#getListForm").submit(function (event) {
    event.preventDefault();

    //var jsonText = '{"ListRequest":{ "Values":[' +
    //       '{"Name":"SC", "Value":"' + $form.find("input[name='txtSC']").val() + '"},' +
    //       '{"Name":"PC","Value":"' + $form.find("input[name='txtPC']").val() + '"}]}}';


    var obj = {
        ListRequest: {
            Values: [
                 {
                     Name: "SC",
                     Value: $('input[name="txtSC"]').val()
                 },
                 {
                     Name: "PC",
                     Value: $('input[name="txtPC"]').val()
                 }
            ]
        }
    }


    var jsonObj = JSON.stringify(obj);

    var $form = $(this), term = jsonText, url = 'http://localhost/WebTest/DataService.svc';

    $.post(url + '/GetList', jsonObj,
    function (data, status) {
    alert("Data: " + data + "\nStatus: " + status);
    });

    // Send the data using post
    //var posting = $.post( url, term);
    //posting.done(function (data) {
    //    var content = $(data).find("#content");
    //    $("#result").empty().append(content);
    //});

});
</script>

@{
    ViewBag.Title = "Json Test";
}

<hgroup class="title">
    <h1>@ViewBag.Title.</h1>
    <h2>@ViewBag.Message</h2>
</hgroup>


<form id="getListForm">
    <input type="text" name="txtSC">
    <input type="text" name="txtPC">
    <input type="submit" value="Get List">
</form>

<div id="result"></div>

Благодарю.

ОБНОВИТЬ:

Последний код, где я обновил термин для использования jsonObj, и я поместил свой код в блок $ (document).ready, как было предложено:

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function () {
    // Attach a submit handler to the form
    $("#getDocumentListForm").submit(function (event) {

        event.preventDefault();
        alert('test1');

        var obj = {
            ListRequest: {
                Values: [
                     {
                         Name: "SC",
                         Value: $('input[name="txtSC"]').val()
                     },
                     {
                         Name: "PO",
                         Value: $('input[name="txtPC"]').val()
                     }
                ]
            }
        }


            var jsonObj = JSON.stringify(obj);

            var $form = $(this), term = jsonObj, url = 'http://localhost/WebTest/DataService.svc';

            alert(term);
            alert(url);

            $.post(url + 'GetList', jsonObj,
            function (data, status) {
                alert("Data: " + data + "\nStatus: " + status);
            });

            //Tried posting using term but no luck. Same problem.
            //$.post(url + 'GetList',
            //function (data, status) {
            //    alert("Data: " + data + "\nStatus: " + status);
            //});

            // Send the data using post
            //var posting = $.post(url, term);
            //posting.done(function (data) {
            //    //var content = $(data).find("#content");
            //    //$("#result").empty().append(content);
            //    alert(data)
            //});

            alert('test2');
        });
    });

</script>

@{
    ViewBag.Title = "Test";
}

<hgroup class="title">
    <h1>@ViewBag.Title.</h1>
    <h2>@ViewBag.Message</h2>
</hgroup>


<form id="getDocumentListForm">
    <input type="text" name="txtSC">
    <input type="text" name="txtPC">
    <input type="submit" value="Get Document List">
</form>

<div id="result"></div>

Финальное обновление по этому вопросу

УБЕДИТЬСЯ:

  1. НЕ ИСПОЛЬЗОВАТЬ IE11 С JQUERY, ХОРОШО В МЕНЬШЕМ СОКРАЩЕНИИ 2.1.1! НЕ ЗНАЙ, КАК ЭТО РАБОТАЕТ С ДРУГИМИ ВЕРСИЯМИ IE.

  2. ВСЕГДА ИСПЫТАТЬ С ДРУГИМИ ПРОСМОТРАМИ

  3. УБЕДИТЕСЬ, ЧТОБЫ УСТАНОВИТЬ ВАШ ДЖЕРКВЫЙ SRC К ПРАВИЛЬНОМУ ИСПОЛЬЗОВАНИЮ HTTP ИЛИ HTTPS В ЗАВИСИМОСТИ ОТ ЧТО ВЫ ИСПОЛЬЗУЕТЕ.

Это.

  • 1
    Почему вы публикуете term (какой бы он ни был), а не jsonText ? Кроме того, было бы проще, красивее и менее подвержено ошибкам построить объект JavaScript, а затем использовать JSON.stringify для него.
  • 0
    Посмотрите на этот ответ . Выглядит как возможный дубликат
Показать ещё 4 комментария
Теги:
razor

1 ответ

0

Я предполагаю, что происходит то, что вы пытаетесь передать неопределенную переменную с именем term вместо jsonText, поэтому код javascript бросает неперехваченное исключение и игнорируется, и вы получаете нормальное действие из вашего элемента form.

Вы должны передать правильные данные. А также, зная о JSON.stringify возможно, сэкономит вам много времени и головных болей;). Вы можете создать свой объект так:

var obj = {
    ListRequest: {
        Values: [
             { 
                 Name:  "SC",
                 Value: $('input[name="txtSC"]').val()
             },
             {
                 Name:  "PC",
                 Value: $('input[name="txtPC"]').val()
             }
        ]
    }
};

var jsonObj = JSON.stringify(obj);

Еще одна ошибка, которую я могу придумать в вашем коде, заключается в том, что вы привязали свой AJAX к событию click на кнопке отправки или событию onsubmit, и вы не preventDefault() ing.

редактировать

Учитывая код, который вы опубликовали, у вас есть несколько ошибок:

  1. Вы превратили свой код в блок jQuery(document).ready()?
  2. Вы прокомментировали jsonText но все же назначили его переменной term, вызывая неперехваченное исключение.

Исправьте эти две вещи, и ваш запрос POST будет выполнен правильно.

С другой стороны, почему на Земле вы используете jQuery версии 1.5?

  • 0
    Я никогда не думал, что смогу определить объект в формате JSON непосредственно в javascript ... Д-у (нотация JavaScript ....) Это имеет смысл !! Я думал, что должен был определить это как строку! Что касается protectDefault (), я его использую, но не включил здесь. Виноват! Я собираюсь обновить свой пост и опубликовать всю страницу, так как она все еще не работает. Должно быть чего-то не хватает.
  • 0
    Я отредактировал свой ответ, чтобы решить вашу проблему. Я проверил на своей локальной машине, и запрос POST будет отправлен правильно, если вы исправите эти две вещи.
Показать ещё 9 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню