Javascript 如何在jQuery中获取AJAX数据？_Javascript_Jquery_Html

Javascript 如何在jQuery中获取AJAX数据？

javascript jquery html

Javascript 如何在jQuery中获取AJAX数据？,javascript,jquery,html,Javascript,Jquery,Html,我有一个局部视图，我想根据成功的响应重新加载某些标记。我正在使用.filter获取特定的标记，但它不起作用。基于其他stack overflow文章和google，这应该是可行的，但在我的情况下不是这样我的目标是，从AJAX响应中提取特定的div标记并重新加载视图 AJAX: $.ajax( { url: '/MyUrl', success: function(response) { updateOrderSta

我有一个

局部视图

，我想根据成功的响应重新加载某些

标记。我正在使用

.filter

获取特定的标记，但它不起作用。基于其他stack overflow文章和google，这应该是可行的，但在我的情况下不是这样

我的目标是，从AJAX响应中提取特定的

div

标记并重新加载视图

AJAX:

$.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>

$.ajax(
{ 
url:“/MyUrl”，
成功：功能（响应）
{ 
updateOrderStatusContent（响应）；
} 
});
this.updateOrderStatusContent=函数（标记）{
警报（“标记”+标记）；//返回HTML。
var$response=$（标记）；//从HTML响应创建jQuery对象。
//选项1=获取文本
var getSpecificText=$response.filter（“#交付状态更新”）.text（）；
警报（getSpecificText）；//这是空的。
//Option-2=获取HTML
var getSpecificHtml=$response.filter（“#交付状态更新”）.html（）；//获取html
警报（getSpecificHtml）；//这是空的。
//Option-3=在这里，我尝试将#delivery status update的内容输出为new，这也不起作用。
$（'#交货状态更新'）.html（jQuery（markup）.find（'#交货状态更新'）.html（））；
};

标记输出：

$.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>


扎克斯比'；s
扎克斯比'；s
ACWORTH00198

贝克路3511号
ACWORTH
GA
30101
美国

交付状态
订单确认：97140987
已收到
厨房
运输途中
已交付
&抄袭；版权所有2018 Tillster，Inc.保留所有权利。
V1.0.0.21003

（功能（w、d、s、l、i）{
w[l]=w[l]| |[]；
w[l]。推({
“gtm.start”：新日期（）.getTime（），
事件：“gtm.js”
});
var f=d.getElementsByTagName[0]，
j=d.createElement，
dl=l！=“数据层”？“&l=”+l:”；
j、 异步=真；
j、 src=
'//www.googletagmanager.com/gtm.js？id='+i+dl；
f、 parentNode.insertBefore（j，f）；
})（窗口、文档、“脚本”、“数据层”、“GTM-M84GGD”）；
s$.analytics.getOrderLevelData（“页面加载”）

我错过了什么？我需要创建另一个

局部视图

来实现我想要的吗？

基本上你需要使用

.find（）

而不是

.filter（）

var标记='Delivery status订单确认：123已收到
厨房
正在运输中
已交付；
var$response=$（标记）；//从HTML响应创建jQuery对象。
var$delivery=$response.find（“#交付状态更新”）；
var getSpecificText=$delivery.text（）；//获取文本
var getSpecificHtml=$delivery.html（）；//获取HTML
console.log（getSpecificText）；
log（getSpecificHtml）
你为什么要这个
？您是否尝试查看（尤其是加载页面片段部分）？是否出现错误？运行此代码时会发生什么情况？这些信息应该在您的question@derloopkat我在代码中添加了注释。我没有得到任何错误<代码>警报

对于所有选项，即使

标记

对象具有HTML数据，也显示为空。能否显示

控制台.log（标记）的内容输出？@Scaramouche用console.log
更新了我的问题。这很有效。因此，我必须使用.find
而不是.fileter
。是的，只要您的标记以“