个人中心
gpt4 book ai didi

javascript - ajax刷新div内的整个页面而不是重新加载div内容

转载 作者：行者123 更新时间：2023-11-28 07:21:58 26 4
gpt4 key购买 nike

Ajax 刷新 div。但问题是它会刷新 div 内的整个页面。就像页内页一样。我知道我做错了。

我正在开发一个 WordPress 网站(本地)。我想在节目开始后立即更改演示者的图像。 Ajax 脚本看起来不错，但不能按我想要的方式工作。所以，我需要你们的帮助......

我把我的代码放在下面。我要刷新的div位于布局页面，ajax脚本位于页脚页面

Wordpress 模板:

<!DOCTYPE html>

<!--[if IE 8]> <html class="ie ie8" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 9]> <html class="ie ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 9]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->

<head>

<?php
/**
 * Match wp_head() indent level
 */
?>

<meta charset="<?php bloginfo('charset'); ?>" />
<title><?php wp_title(''); // stay compatible with SEO plugins ?></title>

<?php if (!Bunyad::options()->no_responsive): // don't add if responsiveness disabled ?>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<?php endif; ?>
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<?php if (Bunyad::options()->favicon): ?>
<link rel="shortcut icon" href="<?php echo esc_attr(Bunyad::options()->favicon); ?>" />
<?php endif; ?>

<?php if (Bunyad::options()->apple_icon): ?>
<link rel="apple-touch-icon-precomposed" href="<?php echo esc_attr(Bunyad::options()->apple_icon); ?>" />
<?php endif; ?>

<?php wp_head(); ?>

<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->

</head>

<body <?php body_class(); ?>>

  <div class="main-wrap">

    <?php

    /**
     * Get the partial template for top bar
     */
    get_template_part('partials/header/top-bar');

    ?>

    <div id="main-head" class="main-head">

        <div class="wrap">


            <?php

                /**
                 * Get the header based on settings
                 */
                $header = Bunyad::options()->header_style ? Bunyad::options()->header_style : 'default';

                get_template_part('partials/header/' . $header);


                /**
                 * Setup data variables to enable or disable sticky nav functionality
                 */
                $attribs = array('class' => array('navigation cf', Bunyad::options()->nav_align));

                if (Bunyad::options()->sticky_nav) {

                    $attribs['data-sticky-nav'] = 1;

                    // sticky navigation logo?
                    if (Bunyad::options()->sticky_nav_logo) {
                        $attribs['data-sticky-logo'] = 1;
                    }
                }

            ?>

            <nav <?php Bunyad::markup()->attribs('navigation', $attribs); ?>>

                <div class="mobile" data-type="<?php echo Bunyad::options()->mobile_menu_type; ?>" data-search="<?php echo Bunyad::options()->mobile_nav_search; ?>">
                    <a href="#" class="selected">
                        <span class="text"><?php _e('Navigate', 'bunyad'); ?></span><span class="current"></span> <i class="hamburger fa fa-bars"></i>
                    </a>
                </div>

                <?php wp_nav_menu(array('theme_location' => 'main', 'fallback_cb' => '', 'walker' =>  'Bunyad_Menu_Walker')); ?>
            </nav>

        </div>

    </div>

  <?php if (!Bunyad::options()->disable_breadcrumbs): ?>
    <div class="wrap">
        <?php Bunyad::core()->breadcrumbs(); ?>
    </div>
  <?php endif; ?>

  <?php do_action('bunyad_pre_main_content'); ?>

**Layout page:**

<?php
/*
    Template Name: Radio Player
*/

get_header('radio');


if (Bunyad::posts()->meta('featured_slider')):
    get_template_part('partial-sliders');
endif;

?>


  <div class="main wrap cf">

  <div class="row">
    <div class="col-8 main-content">

        <?php if (have_posts()): the_post(); endif; // load the page ?>

        <div id="post-<?php the_ID(); ?>" <?php post_class('page-content'); ?>>

        <?php if (Bunyad::posts()->meta('page_title') != 'no'): ?>

            <header class="post-header">

            <?php if (has_post_thumbnail()): ?>
                <div class="featured">
                    <a href="<?php $url = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full'); echo $url[0]; ?>" title="<?php the_title_attribute(); ?>">

                    <?php if ((!in_the_loop() && Bunyad::posts()->meta('layout_style') == 'full') OR Bunyad::core()->get_sidebar() == 'none'): // largest images - no sidebar? ?>

                        <?php the_post_thumbnail('main-full', array('title' => strip_tags(get_the_title()))); ?>

                    <?php else: ?>

                        <?php the_post_thumbnail('main-slider', array('title' => strip_tags(get_the_title()))); ?>

                    <?php endif; ?>

                    </a>
                </div>
            <?php endif; ?>

            </header><!-- .post-header -->

        <?php endif; ?>

            <div class="refreshMe">
        <?php Bunyad::posts()->the_content(); ?>


        </div>

    </div>

  </div> <!-- .row -->
  </div> <!-- .main -->
</div>


<?php get_footer('radio'); ?>


**i put my refresh div on the layout page with class name "refreshMe

Footer.php**


    <?php do_action('bunyad_post_main_content'); ?>

    <footer class="main-footer">

     <p>
         Copyright &copy; Babylon Radio 2015
    </p>

    </footer>

</div> <!-- .main-wrap -->

<?php wp_enqueue_script("jquery"); ?>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.timers-1.0.0.js"></script>
<script type="text/javascript">

jQuery(document).ready(function(){
    var j = jQuery.noConflict();
    j(document).ready(function()
    {
        j(".refreshMe").everyTime(10000,function(i){
            j.ajax({
                cache: false,
                success: function(html){
                j(".refreshMe").html(html);
                }
            })
        })
    });
    j('.refreshMe').css({color:"red"});
});
</script>

<?php wp_footer(); ?>

</body>
</html>

**and my ajax script is in the footer page.**

Help me out with this

最佳答案

我不熟悉wordpress，但是在ajax方面，你必须有一个url，请求将在其中为你的div获取新内容。例如，您的页面位于 example1.com，因此您必须为 example1.com/get-my-div 创建一个菜单处理程序，这样该页面仅返回您的 div 内容。ajax 调用中的 url 被省略，默认为当前页面。这就是为什么你在页面中有一个页面，因为整个页面的内容都显示在你的div中

关于javascript - ajax刷新div内的整个页面而不是重新加载div内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30203068/

26 4 0
文章推荐： css - 如何清除 ul 的 float
文章推荐： javascript - 从指令范围变量获取引用
文章推荐： ios - 当我向 iOS 请求权限时，我可以更改措辞并重新定义按钮吗？
文章推荐： javascript - Google Chrome - 如何终止正在播放 mjpeg 流的 iframe 的流捕获？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com