如何在 jQuery 中获取 AJAX 数据?

夏普

我有一个partial view我想<div>根据成功响应重新加载某些标签的地方。我正在使用.filter获取特定标签,但它不起作用。基于其他堆栈溢出文章和谷歌,这应该有效,但在我的情况下无效。

我的目标是,从 AJAX 响应中提取特定div标签并重新加载视图。

阿贾克斯:

$.ajax(
 { 
    url: '/MyUrl', 
    success: function(response) 
            { 
                updateOrderStatusContent(response);
            } 
});


this.updateOrderStatusContent = function (markup) {

     alert("markup " + markup); // This returns HTML.
     var $response = $(markup); // Creating jQuery object from HTML response.

     // Option-1 = Get text
     var getSpecificText = $response.filter('#delivery-status-update').text();
     alert(getSpecificText);     // This is empty.

     // Option-2 = Get HTML
     var getSpecificHtml = $response.filter('#delivery-status-update').html(); // to get HTML 
     alert(getSpecificHtml);     // This is empty.

     // Option-3 = Here I tried output the content of #delivery-status-update in new <div> which is also not working.
     $('#delivery-status-updated').html(jQuery(markup).find('#delivery-status-update').html()); 

};

标记输出:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset='UTF-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta content='IE=Edge' http-equiv='X-UA-Compatible' />
    <script src="/Scripts/S2/console.js"></script>

    <!--[if IE]>             <script src="/Scripts/S2/html5.js"></script>

<script src="/Scripts/S2/json2.js"></script>

 <![endif]-->
    <title></title>
    <link href="/Content/S2/menu.css" rel="stylesheet" />

    <link href="/content/themes/stwo/jquery-ui.css" rel="stylesheet" />

    <link rel="shortcut icon" type="image/x-png" href="/Branding/Snapfinger/favicon.png" />
    <link rel="apple-touch-icon" href="/Branding/Snapfinger/touch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/Branding/Snapfinger/touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/Branding/Snapfinger/touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/Branding/Snapfinger/touch-icon-ipad-retina.png">
    <link rel="stylesheet" href="/Branding/Snapfinger/Snapfinger.css" />
    <!--[if IE]><link rel="stylesheet" href="/Branding/Snapfinger/ie.css" /> <![endif]-->
</head>

<body>
    <header class="header" id="header"> <a href="javascript:;" id="skiplink" class="skip">Skip to content</a>
        <div class="header-wrapper">
            <div class="logo" id="logo" aria-label="Zaxby&#39;s logo" itemscope itemtype="https://schema.org/Organization" tabindex="0"> <img itemprop="logo" alt="Zaxby&#39;s logo" src="/api/content/image/119/7/200/200"></div>
            <input type="hidden" id="restaurantId" value="9018" />
            <input type="hidden" id="menuType" />
            <input type="hidden" id="unitNumber" value="198" />
            <input type="hidden" id="currentUtcTime" value="2018-04-24T19:27:29.2451514Z" />
            <div class="restaurant-info">
                <h1 class="title" id="title">Zaxby&#39;s</h1>
                <meta itemprop="brand" content="Zaxby&#39;s" />
                <meta itemprop="menu" content="https://local.kiofc.com/o/Restaurant/9018" /> <span itemprop="geo" itemscope itemtype="https://data-vocabulary.org/Geo"><meta itemprop="latitude" content="34.0756282" /><meta itemprop="longitude" content="-84.6527738" /> </span>
                <div class="restaurant-name" itemprop="name">Zaxby&#39;s</div>
                <div class="store-name" itemprop="name">ACWORTH_00198</div>
                <ul id="restaurant-address" class="address" itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
                    <li class="street" itemprop="streetAddress" tabindex="0">3511 BAKER RD</li>
                    <li class="city" itemprop="addressLocality" tabindex="0">ACWORTH</li>
                    <li class="state" itemprop="addressRegion" tabindex="0">GA</li>
                    <li class="zip" itemprop="postalCode" tabindex="0">30101</li>
                    <li class="country" itemprop="addressCountry" tabindex="0">US</li>
                </ul><a title="View location on google maps" class="map" itemprop="map" target="_blank" href="https://maps.google.com/maps?client=gme-snapfinger&amp;channel=SnapfingerMobileViewMap&amp;oi=map&amp;q=3511+BAKER+RD,+ACWORTH,+GA+30101"> View Map </a>
                <div class="phone" itemprop="telephone"> <a title="Call 678-574-0400" href="tel://678-574-0400">678-574-0400</a></div>
                <input type="hidden" id="LocationDescription" value="ACWORTH - BAKER RD" />
            </div>
        </div>
    </header>
    <div class="page" id="delivery-status-bar">
        <div class="content">
            <section class="delivery-status" id="delivery-status-bar-section">
                <div id="delivery-status-update">
                    <h3 class="summary-title">Delivery Status</h3>
                    <div id="order-id">
                        <h3 class="summary-title" tabindex="0">Order Confirmation : 97140987</h3></div>
                    <ol class="progress-tracker" data-progress-tracker-steps="4">
                        <li class="progress-tracker-done">Received</li>
                        <li class="progress-tracker-done">Kitchen</li>
                        <li class="progress-tracker-todo">In Transit</li>
                        <li class="progress-tracker-todo">Delivered</li>
                    </ol>
                </div>
            </section>
        </div>
    </div>
    <footer class="footer" id="footer">
        <div id="copyright-version">
            <div id="copyright-info" tabindex="0"> &copy; Copyright 2018 Tillster, Inc. All rights reserved.</div>
            <div id="version-info" tabindex="0"> v 1.0.0.21003</div>
        </div>
    </footer>
    <input id="concept-key" name="concept-key" type="hidden" value="Snapfinger" />
    <input id="concept-id" name="concept-id" type="hidden" value="-1" />
    <input id="is-vanity-url" name="is-vanity-url" type="hidden" value="False" />
    <input id="is-on-premise" name="is-on-premise" type="hidden" value="False" />
    <script src="/Scripts/jquery-1.9.1.js"></script>

    <script src="/Scripts/jquery-ui-1.11.1.js"></script>

    <script src="/Scripts/S2/modernizr2.7.1.js"></script>

    <script src="/Scripts/S2/jquery.lazyload.min.js"></script>

    <script src="/Scripts/jquery/getscriptonce/jquery.getscriptonce.js"></script>

    <script src="/Scripts/handlebars.js"></script>

    <script src="/Scripts/S2/utility.js"></script>

    <script src="/Scripts/S2/loginRegister.js"></script>

    <script src="/Scripts/S2/analytics.js"></script>

    <script src="/Scripts/S2/orderStatus.js"></script>

    <div id="dialog">
        <p id="dialog-message"></p><img id="dialog-image" alt="dialog message" src="#" /></div>
    <noscript>
        <iframe src="//www.googletagmanager.com/ns.html?id=GTM-PC8WMW" height="0" width="0" style="display:none;visibility:hidden"></iframe>
    </noscript>
    <script>
        (function(w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime(),
                event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s),
                dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src =
                '//www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-M84GGD');
    </script>
    <script type="text/javascript">
        s$.analytics.getOrderLevelData("pageLoad")
    </script>
</body>

</html>

我在这里缺少什么?我是否需要创建另一个partial view来实现我想要的?

丹尼尔毯子

基本上你需要使用.find()而不是.filter().

var markup = '<!DOCTYPE html><html lang="en"><head> <title></title></head><body><header class="header" id="header"> </header><div class="page" id="delivery-status-bar"><div class="content"><section class="delivery-status" id="delivery-status-bar-section"><div id="delivery-status-update"><h3 class="summary-title">Delivery Status</h3><div id="order-id"><h3 class="summary-title" tabindex="0">Order Confirmation : 123</h3></div><ol class="progress-tracker" data-progress-tracker-steps="4"><li class="progress-tracker-done">Received</li><li class="progress-tracker-done">Kitchen</li><li class="progress-tracker-done">In Transit</li><li class="progress-tracker-todo">Delivered</li></ol></div></section></div></div><footer class="footer" id="footer"></footer></body></html>';

var $response = $(markup); // Creating jQuery object from HTML response.
var $delivery = $response.find('#delivery-status-update');
var getSpecificText = $delivery.text(); // to get text
var getSpecificHtml = $delivery.html(); // to get HTML 

console.log(getSpecificText);
console.log(getSpecificHtml);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何从JQuery Ajax请求中获取“数据”

来自分类Dev

如何从PHP中的Ajax Jquery serializeArray()获取数据?

来自分类Dev

如何使用ExpressJS从jQuery Ajax发布中获取数据

来自分类Dev

如何使用jQuery ajax获取数据?

来自分类Dev

从ajax jQuery中的数据变量获取属性

来自分类Dev

如何使用ajax从jquery数据表中嵌套的json子数组中获取数据

来自分类Dev

如何在ajax调用中获取JSON数据

来自分类Dev

如何在ajax.php页面中获取JSON数据?

来自分类Dev

javascript-如何在jquery中使用Ajax从Json发送数据以获取html元素?

来自分类Dev

如何在没有jQuery的情况下从ajax responseText的html元素获取数据

来自分类Dev

NodeJS如何通过POST从jquery ajax调用发送的服务器中获取数据

来自分类Dev

我如何在jQuery中获取数据绑定值

来自分类Dev

如何在jQuery.get中获取特定元素“数据”

来自分类Dev

我如何在jQuery中获取数据绑定值

来自分类Dev

如何在jquery中获取HTML标记数据属性

来自分类Dev

如何在fancytree jquery中获取树元数据

来自分类Dev

如何在jQuery中获取数据类型属性?

来自分类Dev

如何从jQuery数据表中的Ajax数据源获取mRender()函数中的隐藏列值

来自分类Dev

如何使用 $.ajax() jquery 获取数据并显示到 HTML 网页

来自分类Dev

¿如何获取ajax数据?

来自分类Dev

如何从ajax获取数据?

来自分类Dev

如何在ASP.NET WebForm中的jQuery Ajax中使用C#数据表?

来自分类Dev

如何在Backbone.Marionette中使用JQuery和Ajax在下拉列表中呈现数据

来自分类Dev

jQuery ajax请求:如何在成功函数中访问发送的数据?

来自分类Dev

如何在jquery ajax中添加和检索其他数据到serialize()?

来自分类Dev

如何使用AJAX发送POST数据?以及如何在Web API中获取POST数据?

来自分类Dev

如何在AJAX调用中验证数据

来自分类Dev

如何在ajax中传递数据?

来自分类Dev

jQuery .on()事件无法从Ajax加载的内容中获取数据

Related 相关文章

  1. 1

    如何从JQuery Ajax请求中获取“数据”

  2. 2

    如何从PHP中的Ajax Jquery serializeArray()获取数据?

  3. 3

    如何使用ExpressJS从jQuery Ajax发布中获取数据

  4. 4

    如何使用jQuery ajax获取数据?

  5. 5

    从ajax jQuery中的数据变量获取属性

  6. 6

    如何使用ajax从jquery数据表中嵌套的json子数组中获取数据

  7. 7

    如何在ajax调用中获取JSON数据

  8. 8

    如何在ajax.php页面中获取JSON数据?

  9. 9

    javascript-如何在jquery中使用Ajax从Json发送数据以获取html元素?

  10. 10

    如何在没有jQuery的情况下从ajax responseText的html元素获取数据

  11. 11

    NodeJS如何通过POST从jquery ajax调用发送的服务器中获取数据

  12. 12

    我如何在jQuery中获取数据绑定值

  13. 13

    如何在jQuery.get中获取特定元素“数据”

  14. 14

    我如何在jQuery中获取数据绑定值

  15. 15

    如何在jquery中获取HTML标记数据属性

  16. 16

    如何在fancytree jquery中获取树元数据

  17. 17

    如何在jQuery中获取数据类型属性?

  18. 18

    如何从jQuery数据表中的Ajax数据源获取mRender()函数中的隐藏列值

  19. 19

    如何使用 $.ajax() jquery 获取数据并显示到 HTML 网页

  20. 20

    ¿如何获取ajax数据?

  21. 21

    如何从ajax获取数据?

  22. 22

    如何在ASP.NET WebForm中的jQuery Ajax中使用C#数据表?

  23. 23

    如何在Backbone.Marionette中使用JQuery和Ajax在下拉列表中呈现数据

  24. 24

    jQuery ajax请求:如何在成功函数中访问发送的数据?

  25. 25

    如何在jquery ajax中添加和检索其他数据到serialize()?

  26. 26

    如何使用AJAX发送POST数据?以及如何在Web API中获取POST数据?

  27. 27

    如何在AJAX调用中验证数据

  28. 28

    如何在ajax中传递数据?

  29. 29

    jQuery .on()事件无法从Ajax加载的内容中获取数据

热门标签

归档