在ajax中获取请求到控制器操作不起作用？

i am trying to do a ajax get request in asp.net mvc 3. It does not work though ie the GetSquareRoot action is not hit?

我正在尝试在asp.net mvc 3中执行ajax get请求。但是它没有工作,即GetSquareRoot操作没有被命中?

index.cshtml

   @{
    ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
        http://asp.net/mvc</a>.
</p>
<script type="text/javascript">
        function calculateSquareRoot(numberToCalculate) {
            $.ajax({
                type: 'Get',
                url: '/Home/GetSquareRoot',
                data: { number: numberToCalculate },
                success: function (data) { alert(data.result); }
            });
        }

</script>
<button onclick="calculateSquareRoot(9);">Calculate Square</button>

on the homecontroller:

在家庭控制器上:

public JsonResult GetSquareRoot(long number)
{
    var square = Math.Sqrt(number);
    return Json(new { result = square }, JsonRequestBehavior.AllowGet);
}

4 个解决方案

#1

If I mount the following page on localhost:

如果我在localhost上挂载以下页面:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" 
           src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
        </script>
        <script type="text/javascript">
        //<![CDATA[
            function calculateSquareRoot(numberToCalculate) {
                $.ajax({
                    type: 'GET',
                    url: '/Home/GetSquareRoot',
                    data: { number: numberToCalculate },
                    success: function (data) { alert(data.result); }
                });
            }
        //]]>
        </script>
    </head>
    <body>
        <button onclick="calculateSquareRoot(9);">Calculate Square</button>
    </body>
</html>

When I hit the button, I see a request issued to:

当我点击按钮时,我看到发出的请求:

http://localhost/Home/GetSquareRoot?number=9

Are you sure you've told us the whole story?

你确定你告诉了我们整个故事吗?

#2

I think your jQuery ajax is good. But I found your button tag is wrong.

我认为你的jQuery ajax很好。但我发现你的按钮标签是错误的。

AS-IS

<button onclick="calculateSquareRoot(9);">Calculate Square</button>

TO-BE

<button type="button" onclick="calculateSquareRoot(9);">Calculate Square</button>

Hope it will help you.

希望它会对你有所帮助。

Luker.

#3

Not sure if this helps, but the docs state that the type parameter should read GET... not Get

不确定这是否有帮助,但文档声明类型参数应该读取GET ...而不是Get

#4

check the request at the developer tools(F12) at the network tab. see what goes out and if it goes to the right controller/action with the parameter

在网络选项卡上的开发人员工具(F12)中查看请求。看看是什么,以及它是否通过参数进入正确的控制器/动作

change the type of number to int instead of long(maybe the ModelBinder struggles with binding to long(not likely)

将数字类型更改为int而不是long(可能是ModelBinder与long绑定(不太可能)

add an error function to the ajax call:

在ajax调用中添加一个错误函数:

   $.ajax({
        type: 'GET',
        url: '/Home/GetSquareRoot',
        data: { number: numberToCalculate },
        success: function (data) { alert(data.result); },
        error: function (jqXHR, textStatus, errorThrown) { debugger;/*see what happened */ }
    });

#1