Question

我正试图用这样的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");
    }

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

我只想将消息“确定”或“服务器错误”显示为警告并保持在同一页面上。

编辑：如果我添加

        async: false,

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

如何在警报消息后停止？

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

HTML：

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

Answer 1

试试吧

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);
}

Answer 2

以下列方式制作你的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"/>

Serverside控制器代码是 -

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; }
}

运行应用程序时，您有以下屏幕 -

enter image description here

如果表单中的NO输入有效，则会显示 - false

当有输入时，您会在警报中获得确定。

并且没有REDIRECTION

Answer 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;
}

Answer 4

该文档发现您提交的表单默认为同步操作，并导致新的页面加载。

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

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

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

4 个答案: