如何使用ajax调用json控制器而不重定向到页面答案

【问题标题】：How to call json controller with ajax without redirect to page如何使用ajax调用json控制器而不重定向到页面
【发布时间】：2014-01-25 09:28:08
【问题描述】：

我正在尝试使用这样的 ajax 调用 MVC 控制器

function programare() {
    $.ajax({
        url: "@Url.Action("Programeaza")",
        type: "POST",
        dataType: "json",
        data: {
            name : $("#name").val()
            , surnume : $("#surnume").val()            
        },
        error: function (response) {
            if (!response.Success)
               alert("Server error.");
        },
        success: function (response) {
            if (!response.Success)
                       alert("Form Error.");
        }
    });
}

我的控制器方法如下所示：

    public JsonResult Programeaza(ProgramareModel input) {
        if(String.IsNullOrWhiteSpace(input.name)){
            return Json(new {Success = false});
                    }

        return Json("OK");
    }

调用控制器后，我被重定向到Programare/Programeaza 显示“OK”或{“Success”:false} 的页面，而不是从 ajax 执行成功或错误函数。

我只想将消息“OK”或“Server error”显示为警报并停留在同一页面上。

编辑：如果我添加

        async: false,

对于ajax，调用成功函数并显示“OK”消息，但之后仍然重定向到显示Json内容的页面。

我应该如何让它在警报消息后停止？

    $(function () {
        $("#programare").click(programare); 
    });

html:

    <button type="submit" id="programare">Programeaza</button>

【问题讨论】：

您何时调用 ajax 调用、表单提交、按钮单击等？
我在按钮点击时调用 ajax 方法
显示调用 ajax 调用的代码。
$(function () { $("#programare").click(programare); });

标签： jquery ajax asp.net-mvc json

【解决方案1】：

按照以下方式制作你的 jquery -

<script>
    function Click() {
        $.ajax({
            url: "@Url.Action("Programeaza")",
            type: "POST",
            dataType: "json",
            data: {
                name: $("#name").val()
            , surname: $("#surname").val()
            },
            error: function (response) {
                if (!response.Success)
                    alert("Server error.");
            },
            success: function (response) {
                if (response == 'OK')
                    alert(response);
                else
                    alert(response.Success);
            }
        });
    }
    </script>

而 HTML 将会是 -

<input type="text" name="name" id="name"/>
<input type="text" name="surname" id="surname" />
<input type="button" onclick="Click()" value="Click"/>

服务器端控制器代码是 -

public class jsonController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
    public JsonResult Programeaza(ProgramareModel input)
    {
        if (String.IsNullOrWhiteSpace(input.name))
        {
            return Json(new { Success = false });
        }

        return Json("OK");
    }
}

public class ProgramareModel
{
    public string name { get; set; }
    public string surname { get; set; }
}

当您运行应用程序时，您会看到以下屏幕 -

当在表单中没有输入时，你会得到 - false

当有输入时，您会在警报中看到 OK。

而且没有重定向

【讨论】：

@user3234688 如果我的帖子有帮助，请您将其标记为答案，这将有助于其他人找到解决方案。

【解决方案2】：

试试看

Json Ajax 代码

  $.post("/BindInventory/CheckItem", { input: name }, function (result) {
     alert(reselt);
  });

控制器

 public JsonResult Programeaza(ProgramareModel input) {
    var str ="OK";
    if(String.IsNullOrWhiteSpace(input.name)){
        return Json(new {Success = false});
                }

    return JsonResult(str, JsonRequestBehavior.AllowGet);
}

【讨论】：

【解决方案3】：

您必须阻止表单提交的默认行为。用下一个方法改变你的代码：

function programare() {
    $.ajax({
        url: "@Url.Action("Programeaza")",
        type: "POST",
        dataType: "json",
        data: {
            name : $("#name").val()
            , surnume : $("#surnume").val()            
        },
        error: function (response) {
            if (!response.Success)
               alert("Server error.");
        },
        success: function (response) {
            if (!response.Success)
                       alert("Form Error.");
        }
    });
    return false; // add this line;
}

【讨论】：

【解决方案4】：

文档看到您正在提交一个表单，默认情况下这是一个同步操作，并导致新的页面加载。

你需要像这样处理点击事件：

$('#programare').on('click', function(event){
    event.preventDefault();
    programare();
}

【讨论】：