6

我正在尝试通过jQuery单击按钮来调用方法。到目前为止，这是我所拥有的：

$("a.AddToCart").click(function () {
            var link = document.URL;

            $.ajax({
                 type:"POST",
                 url: "/Account/AddToCartHack",
                 data: {url : link},
                 contentType: "application/json; charset=utf-8",
                 dataType: "json"
            });
        });


[WebMethod]
    public void AddToCartHack(string url)
    {
        GeneralHelperClass.URL = url;
    }

我在这里要做的是，当我单击带有类添加到购物车的链接时，我想调用该方法AddToCartHack并将当前 URL 作为参数传递给它。我一定做错了什么，因为它似乎AddToCartHack没有被调用。

我究竟做错了什么？

4

5 回答 5

26

你的代码有很多问题，我不知道从哪里开始。因此，让我们与您进行一次交互式重构会话（如果您不关心我的评论而只想查看最终和推荐的解决方案，只需在答案末尾向下滚动即可）。

首先：您似乎并没有通过false从.click()事件处理程序返回来取消锚点的默认操作。如果不这样做，您实际上是在让浏览器执行锚点的默认操作（如您所知，锚点是重定向到它的 href 属性指向的 url。因此，您的 AJAX 调用永远不会有时间来执行，因为浏览器已经离开页面并且没有更多的脚本正在运行）。因此，从处理程序返回 false 以使您的 AJAX 脚本能够执行并保持在同一页面上：

$("a.AddToCart").click(function () {
    var link = document.URL;

    $.ajax({
        type:"POST",
        url: "/Account/AddToCartHack",
        data: {url : link},
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    });

    return false;
});

第二：您已经指定了contentType: 'application/json'请求标头，但根本没有发送任何 JSON。您正在发送一个application/x-www-form-urlencoded请求，这是 jQuery 的默认设置。所以在你的情况下摆脱这个无意义的参数：

$("a.AddToCart").click(function () {
    var link = document.URL;

    $.ajax({
        type:"POST",
        url: "/Account/AddToCartHack",
        data: {url : link},
        dataType: "json"
    });

    return false;
});

第三：您已指定您的服务器端代码将返回 JSON ( dataType: 'json')，但您的服务器端代码根本不返回任何内容。这是一种无效的方法。在 ASP.NET MVC 中，您所称的 C# 方法有一个名称。它被称为控制器动作。并且在 ASP.NET MVC 控制器操作中返回 ActionResults，而不是 void。所以修复你的控制器动作。也摆脱了[WebMethod]属性 - 不再在 ASP.NET MVC 中使用

public class AccountController: Controller
{
    public ActionResult AddToCartHack(string url)
    {
        GeneralHelperClass.URL = url;
        return Json(new { success = true });
    }
}

第四：您已将 url 硬编码到 javascript 中的控制器操作，而不是使用服务器端帮助程序来生成此 url。这样做的问题是，如果您在 IIS 中的虚拟目录中部署应用程序，您的代码将会中断。不仅如此 - 如果您决定修改 Global.asax 中的路线模式，您将不得不修改所有脚本，因为 url 将不再是{controller}/{action}. 我建议您解决此问题的方法是使用不显眼的 AJAX。因此，您只需使用 HTML 帮助程序生成锚点：

@Html.ActionLink(
    "Add to cart", 
    "AddToCartHack", 
    "Account", 
    null, 
    new { @class = "AddToCart" }
)

然后不显眼地 AJAXify 这个锚点：

$('a.AddToCart').click(function () {
    var link = document.URL;

    $.ajax({
        type: 'POST',
        url: this.href,
        data: { url : link }
    });

    return false;
});

第五：您似乎document.URL在处理程序中使用了一些变量.click()。它看起来像一些必须在其他地方定义的全局 javascript 变量。不幸的是，您没有显示定义此变量的代码部分，也没有显示为什么要使用它，所以我不能真正提出更好的方法来做到这一点，但我真的觉得它有问题。或者哦，等等，这应该是当前浏览器的 url 吗？？？是这样你应该使用该window.location.href属性。就像这样：

$('a.AddToCart').click(function () {
    $.ajax({
        type: 'POST',
        url: this.href,
        data: { url : window.location.href }
    });

    return false;
});

甚至更好，使其成为原始锚的一部分（最终和推荐的解决方案）：

@Html.ActionLink(
    "Add to cart", 
    "AddToCartHack", 
    "Account", 
    new { url = Request.RawUrl }, 
    new { @class = "AddToCart" }
)

然后简单地说：

$('a.AddToCart').click(function () {
    $.ajax({
        type: 'POST',
        url: this.href
    });

    return false;
});

现在这比我们最初的要好得多。即使页面上禁用了 javascript，您的应用程序现在也可以工作。

于 2012-12-30T13:52:18.210 回答
0

以这种方式放置脚本方法，如下所示

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
于 2012-12-30T17:35:35.477 回答
0

添加成功和错误功能以检查您的 ajax 功能

       ...


       $.ajax({
                 type:"POST",
                 url: "/Account/AddToCartHack",
                 data: {url : link},
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
               success: function(){
                 alert('success');
                },
              error:function(){ 
                  alert('error');
                }
            });
        ....
于 2012-12-31T07:19:26.800 回答
0

如果这是 Asp.Net webforms，则需要将 webmethod 设为静态，否则无法通过 JavaScript 访问该方法。

于 2012-12-31T08:54:44.740 回答
0 
$(document).ready(function () {

    $.ajax({

        url: "Testajax.aspx/GetDate",
        data: "f=GetDate",
        cache: false,
        success: function (content) {
            $('#tableData').append('My Dear Friend');
            alert(content);

        },
        failure: function (response) {
            alert("no data found");
        }


    });
});

于 2013-02-27T18:22:13.227 回答