【问题标题】:ajax data doesn't return correct jQuery html objectajax 数据不返回正确的 jQuery html 对象
【发布时间】:2013-02-16 00:45:36
【问题描述】:

当我将部分视图中的 html 数据转换为 $(data) 时,它不会返回我希望的 jQuery 对象:

console.log($(data)) -> [#document]

相反,它返回:

console.log($(data)) -> [#text, <meta charset=​"utf-8">​, #text, <meta name=​"viewport" content=​"width=device-width">​, #text, <title>​</title>​, #text, <link href=​"/​css?v=EY1fW53lN3Ow8WxEYembf-Ji7ogVpt21gpjVWDy8x6c1" rel=​"stylesheet">, #text, <div>​default​</div>​, #text, <div id=​"test-div">​default​</div>​, #text, <script src=​"/​jsv=k_VAvcysGBhwGVVEK9GAtPakb2vjMfaxz2PhpxPuN0I1">​</script>​, #text ]

当我对我的数据进行原始控制台日志时,它会返回:

console.log(data)->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <link href="/css?v=EY1fW53lN3Ow8WxEYembf-Ji7ogVpt21gpjVWDy8x6c1" rel="stylesheet"/>

</head>
<body>


        <div>default</div>
        <div id="test-div">default</div>

    <script src="/js?v=k_VAvcysGBhwGVVEK9GAtPakb2vjMfaxz2PhpxPuN0I1"></script>

</body>
</html>

问题 1:如何从这些数据中提取 #test-div?


更新 1

这是我的控制器:

public ActionResult Index(string pageName, string categorySlug, string itemSlug)
        {

            if (categorySlug != null)
            {
                var category = _db.Categories.SingleOrDefault(x => x.Slug == categorySlug);
                if (category == null) return Redirect("/");
                ViewBag.Category = category;

                if (itemSlug != null && category.Items.SingleOrDefault(x => x.Slug == itemSlug) != null)
                {
                    ViewBag.ItemSlug = itemSlug;
                }
                else if (itemSlug != null)
                {
                    return Redirect("/i/" + categorySlug);
                }
            }

            ViewBag.PageName = pageName;
            return View();
        }

这是我的路线:

routes.MapRoute(
                name: "Default",
                url: "{pageName}/{categorySlug}/{itemSlug}",
                defaults: new { controller = "Home", action = "Index", pageName = UrlParameter.Optional, categorySlug = UrlParameter.Optional, itemSlug = UrlParameter.Optional },
                namespaces: new string[] { "ClothRent.Controllers" }
            );

索引视图:

@{
    ViewBag.Title = "";
    Layout = "~/Views/Shared/_Layout.cshtml";
    string pageName = ViewBag.PageName;

    ClothRent.Models.Category c = ViewBag.Category;
}
@switch (pageName)
{
    case "info":
        Html.RenderPartial("_Info");
        break;
    case "i":
        Html.RenderPartial("_Category", c);
        break;
    default:
        <div>default</div>
        <div id="test-div">default</div>
        break;
}

_Category部分视图:

@model ClothRent.Models.Category
@{
    string zveri = "zveri";
    string teli = "teli";
}
@switch (Model.Slug)
{
    case "zveri":
        @zveri
        break;
    case "pasaku-teli":
        @Html.Partial("_Teli", Model);
        break;

}

它是如何工作的:

  1. 我通过 URL /i/category/ 访问并返回带有适当部分视图数据的 /home/index,请参阅上面我如何获取部分视图。
  2. 然后,如果用户希望他将继续浏览网站,但不是重新加载页面,我想在女巫情况下执行 htmlPushState,我将对特定控制器进行 ajax 调用,并提取我需要显示的下一个内容的数据。李>

更新 2

问题 2: 有没有办法只使用 JavaScript 渲染从 ajax 调用返回的数据,这样我就不需要专门为 ajax 调用编写 API?


更新 3

感谢大家的回答,我将来肯定会为专有的 ajax 调用制作 api,但现在由于我不掌握网站的后端,我找到了使用 JS 的解决方案。

Posted Answer.

【问题讨论】:

    标签: javascript jquery ajax asp.net-mvc-4 str-replace


    【解决方案1】:

    感谢Dave A,我使用这种语法解决了问题。

    $("#container").load("/i/category/ #test-div")

    【讨论】:

      【解决方案2】:

      我想我明白了。 div test-div 的选择器过滤的负载会满足您的需求吗?

      $("#container").load('/i/category/').('#test-div');
      

      【讨论】:

      • 我明白你想向我展示什么,但我不想从返回的数据中加载所有 html,我只想加载该 html #test-div 的一部分,我想排除其他一切。问题是我无法将数据转换为普通的 $(data) 对象,正如您所看到的那样......
      • 我只想得到&lt;div id="test-div"&gt;default&lt;/div&gt;。
      • 你确定它的语法正确吗?因为我的 chrome 控制台显示不正确...
      • @skmasq 不得不承认我没有测试它。我确定的概念和语法似乎是正确的。我必须创建自己的测试用例来解决问题。
      • @skmasq,我想我终于明白了。这又是未经测试的,但调整了我的答案。它是一个数据选择器。
      猜你喜欢
      • 2013-03-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-09-14
      相关资源
      最近更新 更多