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>

调用$ .post方法的jQuery函数

 $("#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的{{1}}财产？，见POST。虽然问题var activity= Request["add_activity"];上的js数据似乎POST包含在$("#modal_activity_input").val();的调用中，jQuery()会返回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>')。

或者，它可以从DOM中选择现有元素（关键字：css选择器，sizzle）$("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不会返回到您的响应函数，而是返回到失败处理程序。

在内部，它正在使用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

您只需要在这类问题中检查您的控制台，

如果您使用谷歌浏览器按f12 键或右键单击检查元素，那么您将能够找到控制台，

如果您使用的是Firefox Ctrl + Shift + K ，

我也创造了一个小提琴，

＆＃13;

$("#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);
           });
    });

＆＃13;

<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"/>

＆＃13;

数据传递正常工作

jQuery $ .post方法。从被调用的cshtml页面请求数据。我怎样才能检查它是否有效？

3 个答案: