javascript - Jquery Ajax 调用未命中操作方法/返回整个 HTML 页面

转载作者：行者123 更新时间：2023-11-29 21:51:34

25

4

可以在下面找到我的问题的解决方案。

我无法让我的代码工作。我需要将 AJAX 调用发送到 Controller 中必须返回字符串的操作方法(目前)。但是当我激活 AJAX 调用时，它会返回我当前所在页面的 HTML 源代码而且它甚至没有达到所需的 Controller 操作。
这是我的代码:

Ajax调用

<script>

    function addtoCart()
    {
        amount = prompt("Hoeveel producten wilt u toevoegen aan uw winkelwagen?", 1);
        //find product
        var product = {
            "id": '@Model.ID',
            "naam": "@Model.Naam",
            "afbeelding": "@Model.Afbeelding",
            "beschrijving": "@Model.Beschrijving",
            "prijs": "@Model.Prijs",
            "aantal": amount
        };
        $.ajax({
            url: '@Url.Action("storeProductInSession", "Product")',
            type: 'POST',
            data: JSON.stringify(product),
            dataType: 'json', //Right now, this gives an "Unexpected Token < error". This is probably because when the method returns the entire HTML document, it won't be able to render <!doctype html> as JSON.
            contentType: 'application/json; charset=utf-8',
            success: function (result)
            {
                console.log(result);
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                console.log(product);
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
            },
            async: true
        });

        //sessionStorage.setItem('@Model.ID', JSON.stringify(product)); This is for later
    }

StoreProductInSession(必须调用的方法)

 [HttpPost]
        public string storeProductInSession(object product)/*, string naam, string afbeelding, string beschrijving, decimal prijs, int aantal)*/
        {
            return "This method is going to do session stuff, but for now it just has to return this string";

            //Get the POST input from the AJAX call

            //Add the input to a JSON array

            //add the array to the session

            //Return the array

            //let javascript convert that array to the cart <li>
        }

它仍然返回整个 HTML 页面，即使 object product 参数不正确，我也很高兴看到 ajax 调用实际上命中了那个方法。我认为调用和我的路由之间可能存在问题，但我不确定。这是代码:

    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
        routes.MapRoute(
name: "Product",
url: "Product/{id}",
defaults: new { controller = "Product", action = "Index" }
);
        routes.MapRoute(
            name: "Categorie",
            url: "Categorie/{id}",
            defaults: new { controller = "Categorie", action = "Index" }
            );
        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Welkom", action = "Index", id = UrlParameter.Optional }
        );


    }

如果我什至能够简单地将 ID 提供给 StoreProductInSession 操作，我就可以从那里开始工作。我将使用用户的 session ，所以我认为 GET 不够安全。

解决方案

非常感谢@Dolan 的帮助!问题出在我的路由上!

Ajax 调用

<script>

    function addtoCart()
    {
        amount = prompt("Hoeveel producten wilt u toevoegen aan uw winkelwagen?", 1);
        //find product
        var product = {
            "id": '@Model.ID',
            "naam": "@Model.Naam",
            "afbeelding": "@Model.Afbeelding",
            "beschrijving": "@Model.Beschrijving",
            "prijs": "@Model.Prijs",
            "aantal": amount
        };
        $.ajax({
            url: '@Url.Action("storeProductInSession", "Product")',
            type: 'POST',
            data: JSON.stringify(product),
            dataType: 'html', //I tried entering 'json' but that gave me a 'unexpected < token' error.
            contentType: 'application/json; charset=utf-8',
            success: function (result)
            {
                console.log(result);
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                console.log(product);
                console.log(jqXHR);
                console.log(textStatus);
                console.log(errorThrown);
            },
            async: true
        });
</script>

storeProductInSession

 [HttpPost]
        public string storeProductInSession(int id, string naam, string afbeelding, string beschrijving, decimal prijs, int aantal)
        {
            return String.Format("Product given to the ajax call: {0}, {1}, {2}, {3}, {4}, {5}", id, naam, afbeelding, beschrijving, prijs, aantal);
}

路由

public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.MapRoute(
    name: "Product",
    url: "Product/{id}",
    defaults: new { controller = "Product", action = "Index" },
    constraints: new { id = "\\d+" }
);

            routes.MapRoute(
                name: "ProductAction",
                url: "Product/storeProductInSession",
                defaults: new { controller = "Product", action = "storeProductInSession" }
            );

            routes.MapRoute(
                name: "Categorie",
                url: "Categorie/{id}",
                defaults: new { controller = "Categorie", action = "Index" }
            );

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Welkom", action = "Index", id = UrlParameter.Optional }
                );


        }

最佳答案

你应该使用 URL 助手:

url: '@Url.Action("storeProductInSession", "Product")',

有关详细信息，请参阅 here .

好的，我认为您的产品对象存在问题。它不是一个对象，而是一个字符串。产品对象周围的 ' 字符是问题所在 - JavaScript 认为它是一个字符串 - 而不是一个对象。它应该是这样的:

var product = {
            "id": "@Model.ID",
            "naam": "@Model.Naam",
            "afbeelding": "@Model.Afbeelding",
            "beschrijving": "@Model.Beschrijving",
            "prijs": "@Model.Prijs",
            "aantal": " + amount + "
        };

参见此处:http://jsfiddle.net/donal/mo776xe0/1/

此外，如果您知道 id 将是一个整数，您可以这样做:

var product = {
            "id": @Model.ID,
            "naam": "@Model.Naam",
            "afbeelding": "@Model.Afbeelding",
            "beschrijving": "@Model.Beschrijving",
            "prijs": "@Model.Prijs",
            "aantal": " + amount + "
        };

你能试试这个吗:

[HttpPost]
public string storeProductInSession(object product)
{
    return "This method is going to do session stuff, but for now it just has to return this string";

}

查看您的路线，我可以看出问题所在。

假设 storeProductInSession 是您要查找的产品的 ID，因此转到产品 Controller 的索引操作。

我们需要的是约束。约束将告诉路由仅在 id 是数字(数字)时使用它。例如:constraints: new { id = @"\d+"}

因此，您需要将路由更改为此(您还需要 Product/storeProductInSession 操作的路由):

routes.MapRoute(
    name: "Product",
    url: "Product/{id}",
    defaults: new { controller = "Product", action = "Index" },
    constraints: new { id = "\\d+" }
);

routes.MapRoute(
    name: "ProductAction", 
    url: "Product/storeProductInSession", 
    defaults: new {controller = "Product", action = "storeProductInSession"}
);

routes.MapRoute(
    name: "Categorie",
    url: "Categorie/{id}",
    defaults: new { controller = "Categorie", action = "Index" }
);

routes.MapRoute(
    name: "Default",
    url: "{controller}/{action}/{id}",
    defaults: new { controller = "Welkom", action = "Index", id = UrlParameter.Optional }
    );

因此，当您请求 Product/storeProductInSession 时。它将看到 storeProductInSession 不是数字，然后继续下一条路线。

下一条路线会将其指向 Product Controller 和 storeProductInSession 操作。

关于javascript - Jquery Ajax 调用未命中操作方法/返回整个 HTML 页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28835271/

25

4

0

文章推荐： PHP SQL 语法错误(不知道为什么)

文章推荐： javascript - AngularJS ng-repeat json-格式

Ruby 方法() 方法
我想了解 Ruby 方法 methods() 是如何工作的。我尝试使用“ruby 方法”在 Google 上搜索，但这不是我需要的。我也看过 ruby-doc.org，但我没有找到这种方法。
VBS教程：方法-Test 方法
Test 方法对指定的字符串执行一个正则表达式搜索，并返回一个 Boolean 值指示是否找到匹配的模式。 object.Test(string) 参数 object 必选项。总是一个
VBS教程：方法-Replace 方法
Replace 方法替换在正则表达式查找中找到的文本。 object.Replace(string1, string2) 参数 object 必选项。总是一个 RegExp 对象的名称。
VBS教程：方法-Raise 方法
Raise 方法生成运行时错误 object.Raise(number, source, description, helpfile, helpcontext) 参数 object 应为
VBS教程：方法-Execute 方法
Execute 方法对指定的字符串执行正则表达式搜索。 object.Execute(string) 参数 object 必选项。总是一个 RegExp 对象的名称。 string
VBS教程：方法-Clear 方法
Clear 方法清除 Err 对象的所有属性设置。 object.Clear object 应为 Err 对象的名称。说明在错误处理后，使用 Clear 显式地清除 Err 对象。此
VBS教程：方法-CopyFile 方法
CopyFile 方法将一个或多个文件从某位置复制到另一位置。 object.CopyFile source, destination[, overwrite] 参数 object 必选
VBS教程：方法-Copy 方法
Copy 方法将指定的文件或文件夹从某位置复制到另一位置。 object.Copy destination[, overwrite] 参数 object 必选项。应为 File 或 F
VBS教程：方法-Close 方法
Close 方法关闭打开的 TextStream 文件。 object.Close object 应为 TextStream 对象的名称。说明下面例子举例说明如何使用 Close 方
VBS教程：方法-BuildPath 方法
BuildPath 方法向现有路径后添加名称。 object.BuildPath(path, name) 参数 object 必选项。应为 FileSystemObject 对象的名称
VBS教程：方法-GetFolder 方法
GetFolder 方法返回与指定的路径中某文件夹相应的 Folder 对象。 object.GetFolder(folderspec) 参数 object 必选项。应为 FileSy
VBS教程：方法-GetFileName 方法
GetFileName 方法返回指定路径（不是指定驱动器路径部分）的最后一个文件或文件夹。 object.GetFileName(pathspec) 参数 object 必选项。应为
VBS教程：方法-GetFile 方法
GetFile 方法返回与指定路径中某文件相应的 File 对象。 object.GetFile(filespec) 参数 object 必选项。应为 FileSystemObject
VBS教程：方法-GetExtensionName 方法
GetExtensionName 方法返回字符串，该字符串包含路径最后一个组成部分的扩展名。 object.GetExtensionName(path) 参数 object 必选项。应
VBS教程：方法-GetDriveName 方法
GetDriveName 方法返回包含指定路径中驱动器名的字符串。 object.GetDriveName(path) 参数 object 必选项。应为 FileSystemObjec
VBS教程：方法-GetDrive 方法
GetDrive 方法返回与指定的路径中驱动器相对应的 Drive 对象。 object.GetDrive drivespec 参数 object 必选项。应为 FileSystemO
VBS教程：方法-GetBaseName 方法
GetBaseName 方法返回字符串，其中包含文件的基本名 (不带扩展名), 或者提供的路径说明中的文件夹。 object.GetBaseName(path) 参数 object 必
VBS教程：方法-GetAbsolutePathName 方法
GetAbsolutePathName 方法从提供的指定路径中返回完整且含义明确的路径。 object.GetAbsolutePathName(pathspec) 参数 object
VBS教程：方法-FolderExists 方法
FolderExists 方法如果指定的文件夹存在，则返回 True；否则返回 False。 object.FolderExists(folderspec) 参数 object 必选项
VBS教程：方法-FileExists 方法
FileExists 方法如果指定的文件存在返回 True；否则返回 False。 object.FileExists(filespec) 参数 object 必选项。应为 FileS

首页

博学

6Ren·AI

商城