带有 AJAX 的 ASP.NET MVC 无法按预期工作答案

【问题标题】：ASP.NET MVC with AJAX doesn't work as expected带有 AJAX 的 ASP.NET MVC 无法按预期工作
【发布时间】：2017-05-02 04:30:15
【问题描述】：

这是我想要实现的目标：

View1 向 View2 发送name 字符串，View2 向 View1 发送 JSON，View1 解析并显示数据。

View1 像这样向 View2 发送名称字符串：

    $(document).ready(function () {

                var myurl = "/Controller/View2";

                $("form").submit(function (event) {
                    $.ajax({
                        type: 'POST',
                        url: myurl,
                        data: $('#nameid').val(),
                        success: function (newdata) {

View2 是一个返回 JSON 的控制器：

        public ActionResult View2(string nameid)
        {


    //do stuff


            return Json(jsObj, JsonRequestBehavior.AllowGet);
        }

View1 控制器是这样的：

    public ActionResult View1(string nameid)
    {
        if(!string.IsNullOrEmpty(nameid))
        {
            return RedirectToAction("View2", new { nameid = nameid });
        }
        else
        {
            return View();
        }

    }

我不知道我搞砸了哪一部分，但是当我单击提交时，它会显示 JSON 对象本身。我该如何解决这种情况？谢谢。

编辑：这是我的 View1 视图（我没有 View2 控制器的视图）：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="~/Scripts/cytoscape.js"></script>
</head>
<style>
    #cy {
        width: 80%;
        height: 80%;
        position: center;
        top: 0px;
        left: 0px;
    }
</style>
<body>

    <form>
        Enter a name:<br>
        <input type="text" name="nameid" id="nameid" value="">
        <br><br>
        <input type="submit" value="Send!">
    </form> 

    <div id="cy"></div>
    <script>

        var myVar = null


        $(document).ready(function () {



            $("form").submit(function (event) {
                //event.preventDefault();
                $.ajax({
                    type: 'POST',
                    url: "/Controller/View2",
                   data: { nameid: $('#nameid').val() },
                    success: function (newdata) {

                        var cy = cytoscape({


                            container: document.getElementById("cy"),
                            elements: JSON.parse(newdata)

                        });

                    }
                });

            });


        });



    </script>
</body>
</html>

【问题讨论】：

标签： jquery asp.net json ajax asp.net-mvc

【解决方案1】：

请检查您指定的网址是否正确。

var myurl = "/Controller/View2";

因为您有一个名为 MainGraph2 的操作

此外，您将无法从 Ajax 调用重定向。所以尝试在 Ajax 成功回调函数中重定向。

此外，如其他答案中所述，您应该将数据传递给控制器，如下所示：

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

编辑

一切看起来都很完美，请尝试以下操作：

$("form").submit(function (event) {
    event.preventDefault();
    $.ajax({
        type: 'POST',
        url: "/Sample/View2",
        data: { nameid: $('#nameid').val() },
        success: function (newdata) {
            $("#cy").val(newdata);
         }
     });
  });

这里的 Sample (url: "/Sample/View2") 是控制器名称 (SampleController)。另外，请确保不要像在

中那样以nameid作为参数调用视图id

http://localhost/Sample/View1?nameid=Jason

如果这样调用，就是返回json数据。

注意：我已将控制器命名为 SampleController 并将 cy 命名为文本的输入类型。

【讨论】：

我更正了这个问题。应该是View2。我照你说的做了，但还是一样。
我相信表单发布正在发生，而不是预期的 Ajax 调用。请您检查/分享视图，以便我们更好地了解。
我添加了我的视图。我没有 View2 控制器的视图。谢谢。
感谢您的回答。我不明白的一点是为什么我在我的 URL 中看到 View2 操作？如何使我的代码仅保留在 View1 操作中？谢谢。
另外，当我添加event.preventDefault(); 时，它根本不起作用。我的意思是它什么也没做。

【解决方案2】：

你能不能试着像这样重写 ajax 并试一试。

 $.ajax({
                type: 'POST',
                url: '/Controller/View2',
                data:{ 
                       nameid: $('#nameid').val()
                      },
                success: function (newdata) {

【讨论】：

【解决方案3】：

首先，你必须阻止正常的表单提交。

其次，要将nameid 值绑定到操作参数，必须为其指定正确的名称。

第三。你有一个名为ControllerController 的控制器类吗？

$("form").submit(function (event) {
  event.preventDefault();
  var myurl = '@Url.Content("~/Controller/View2")';
  $.ajax({
    type: 'POST',
    url: myurl,
    data: { nameid: $('#nameid').val() },
    success: function (newdata) {
      console.log(newdata);
      // ...
    },
    error: function(xhr, status, error) {
      console.log("ERROR: " + status + " - " + error);
      console.log(xhr.responseText);
    });
  });

【讨论】：

你能举个例子吗？我无法理解。对不起。
当我添加event.preventDefault(); 时，没有任何反应。当我删除该行时，它仍然显示 JSON 数据
浏览器显示JSON时，地址栏的url是什么？