jQuery $.post 方法。从调用的 cshtml 页面请求数据。我如何检查它是否有效？

Question

我正在使用 $.post 函数将从输入框收集的一些数据发送到单独的文件 post_new_activity.cshtml 。我还使用警告框进行调试以查看我到达了哪一行代码。我试图将一个变量 'activity' 传递给外部文件。我遇到的问题是我不确定 post 方法是否正常工作，因为只弹出一个警告框（.click 函数中的那个），然后它们没有错误消息或没有更多的警报框。如何检查我的 $.post 是否正常工作。

我对 jQuery 真的很陌生，所以任何帮助都将不胜感激。

以下是一些代码片段：

带有输入框和id的按钮的模态="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() 的调用中，returns 一个 jQuery 对象，在 $.post("post_new_activity.cshtml", $(activity) ?

尝试将数据发布为 {"add_activity": activity}

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

Answer 2

假设 cshtml 代码有效，因为我不知道它，我会建议一些关于 javascript。

对 $.post 的调用有一个奇怪的参数 $(activity).

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

是 jQuery 的一个特殊函数，用于计算 DOM 相关表达式。

例如，它可以在给定字符串 $('<div></div>'); 的情况下创建新的 DOM 元素，然后您可以将其附加到文档

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

或者，它可以 select 来自 DOM 的现有元素（关键字：css select 或 sizzle）$("div");.

这使您可以访问文档中存在的所有 div 个节点

最后一个用法就是数组迭代，比如

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

鉴于此，您的用法 $(activity) 似乎是错误的，因为它要求 jquery 查找/创建给定 $("#modal_activity_input").val().

值的元素

我的理解是您想要 post 该输入的字符串值，而不是 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 不会 return 进入您的响应函数，而是进入失败处理程序。

它在内部使用 promise 实现（关键字 $.defer、$.when、javascript promise、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 handlers。

如果成功，它将执行响应处理程序+始终处理程序。

HTH.

Answer 3

遇到此类问题你只需要检查一下你的控制台，

如果您正在使用 google chrome 按 f12 键或右键单击检查元素然后您将能够找到控制台，

如果您使用的是 firefox Ctrl + Shift + K,

我还在下面创建了一个 fiddle，

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

      $.post("http://whosebug.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"/>

数据传递有效

jQuery $.post 方法。从调用的 cshtml 页面请求数据。我如何检查它是否有效？

jQuery $.post method. Requesting the data from called cshtml page. How can I check that it works?

javascript

jquery

request

.post

razor