Метод jQuery $ .post. Запрос данных с вызываемой страницы cshtml. Как я могу проверить, что он работает?

Question

Я использую функцию $.post для отправки некоторых данных, собранных из окна ввода, в отдельный файл, post_new_activity.cshtml. Я также использую оповещения для целей отладки, чтобы увидеть, в какую строку кода я получаю. Я пытаюсь передать одну переменную «активность» во внешний файл. Проблема, которую я получаю, заключается в том, что я не уверен, что метод post работает, когда всплывает только одно окно предупреждения (то есть в функции .click), а затем у них нет сообщения об ошибке или никаких предупреждающих ящиков. Как проверить, работает ли мой $.post.

Я действительно очень новый для jQuery, поэтому любая помощь вообще будет оценена по достоинству.

Вот некоторые фрагменты кода:

модальный с полем ввода и кнопка с идентификатором = "modal_btn_submit"

<div id="modal_add_activity" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Add an Activity to the Database</h4> 
     </div> 
     <div class="modal-body"> 
     <label for="modal_activity_input">Enter activity name: </label> 
     <input id="modal_activity_input" value=""> 
     <br> 
     <p>Once you press <b class="text-success">Add to Webpage </b>the action can not be undone</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" id="modal_btn_submit" class="btn btn-success" data-dismiss="modal">Add to Webpage</button> 
     <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> 
     </div> 
    </div> 

функция JQuery, которая вызывает метод $ .post

$("#modal_btn_submit").click(function() { 
     var activity = $("#modal_activity_input").val(); 
     alert("Adding " + activity); 

     $.post("post_new_activity.cshtml", $(activity), 
      function (data, status) { 
      alert("Activity: " + data + "\nStatus: " + status); 
      }); 
    }); 

post_new_activity.cshtml, который вызывается методом $ .post

@{ 
    alert("cshtml file loaded"); 
    var activity= Request["add_activity"]; 
    alert("From cshtml file activity: " + activity); 
    var string_return= activity + " Added."; 
    Json.Write (string_return, Response.Output); 

} 

Answer 1

post_new_activity.cshtml ожидается add_activity Недвижимость POST? , см. var activity= Request["add_activity"];. Хотя js на вопрос POST данные, как представляется, $("#modal_activity_input").val(); завернутый в вызов jQuery(), который возвращает объект jQuery, по адресу $.post("post_new_activity.cshtml", $(activity)?

Try посылка данных как {"add_activity": activity}

$.post("post_new_activity.cshtml", {"add_activity": activity}, 
    function (data, status) { 
    alert("Activity: " + data + "\nStatus: " + status); 
}); 

Answer 2

предполагающие код cshtml работает, потому что я не знаю, это, я d предложить кое-что о JavaScript.

Призыв к $ .post имеет странный аргумент $(activity).

$(/*string|array|dom element*/)

является специальным Funtion из JQuery, который используется для оценки выражений, связанных с DOM.

Он может, например, создать новый DOM элемент данную строку $('<div></div>');, вы можете добавить его в документ

$("body").append($('<span></span>').

Или он может выбрать существующий элемент из DOM (ключевые слова: css селектор, шипение) $("div");.

Это дает вам доступ ко всем div узлов, существующих в документе

Наконец, последнее использование является массив итерации, например

$(['some']).each(function(k,v){ /* */ });

---

Учитывая, что ваше использование $(activity) кажется неправильным , так как он запрашивает jquery для поиска/создания элемента с учетом значения $("#modal_activity_input").val().

Мое понимание того, что вы хотите опубликовать строковое значение этого ввода, а не результат выражения jQuery.

Затем ожидается, что второй аргумент $.post будет сериализуемым объектом. Объект, содержащий только простые значения, а не ссылки.

Вы должны переписать его, как заявил guest271314

$.post("post_new_activity.cshtml", {"add_activity": activity}, 
function (data, status) { 
    alert("Activity: " + data + "\nStatus: " + status); 
}); 

---

Второй вопрос, как получить ошибки?

Я подозреваю, рамочные cshtml ответы с определенным кодом ошибки HTTP, когда возникает проблема, т.е. 5xx или 4xx вместо 200.

В этом случае JQuery выиграл т вернуться в вашу функцию отклика, но в сбой обработчика ,

Внутренне используется реализация обещаний (ключевые слова $ .defer, $ .when, javascript prom, Q).

Чтобы поймать эти ошибки, нужно написать его таким образом,

$.post("post_new_activity.cshtml", {"add_activity": activity}, 
    function (data, status) { 
    alert("Activity: " + data + "\nStatus: " + status); 
}).fail(function(){ 
    console.log(arguments); 
}); 

Если вы хотите, чтобы поймать каждый ответ, независимо от их статуса, вы можете использовать always обработчик.

$.post("post_new_activity.cshtml", {"add_activity": activity}, 
    function (data, status) { 
    alert("Activity: " + data + "\nStatus: " + status); 
}).fail(function(){ 
    console.log(arguments); 
}).always(function(){ 
    console.log(arguments); 
}); 

Как вы видите, они цепочки.

В этом примере, если он терпит неудачу, он будет выполнять fail + always обработчики.

Если это удастся, он выполнит обработчик ответа + всегда обработчик.

HTH.

Answer 3

Вам просто нужно проверить вашу консоль в такого рода вопросах,

Если вы используете Google Chrome нажмите f12 ключ или щелкните правой кнопкой мыши инспектировать элемент, то вы сможете найти консоль,

Если вы используете Firefox Ctrl + Shift + K,

Также я создал скрипку ниже,

$("#modal_btn_submit").click(function() { 
 
     var activity = $("#modal_activity_input").val(); 
 
     alert("Adding " + activity); 
 

 
     $.post("http://stackoverflow.com/", $(activity), 
 
      function (data, status) { 
 
      alert("Activity: " + data + "\nStatus: " + status); 
 
       console.log(data); 
 
      }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<a id="modal_btn_submit" >click</a> 
 

 
<input type="text" value="1234" id="modal_activity_input"/>

передачи данных является работает