Question

我很了解vanilla JavaScript，但我不了解jQuery语法，而且我很难用AJAX。我已经阅读了大约30个帖子，但无法在我（相对简单和常见）的方案中使用它。

我有一个带动态标题内容的WordPress网站（所以我需要加载WordPress / PHP变量），我试图加载视频背景或后缩略图作为背景图像，具体取决于屏幕大小（我用JavaScript检测）。检测脚本工作（加载/调整大小），我有PHP脚本，我可以交换到我的页面，成功获取视频或图像。但现在，我怎么能交换它们呢？（我不想同时加载和显示/隐藏，因为这会降低仅限图像用户的页面速度。）

以下是我尝试过的一些事情，但无济于事：

＆＃13;

			$.ajax({
			  type: "GET",
			  url: '/wordpress/wp-content/themes/myTheme/home-video.php',
			  success: function(data) {
			    $('#theDiv').html(data);
			  }
			});

＆＃13;

			$.get("/wordpress/wp-content/themes/myTheme/home-video.php");
			$('#theDiv').replaceWith('<?php include "/wordpress/wp-content/themes/myTheme/home-video.php"; ?>');

＆＃13;

			$('#theDiv').load('/wordpress/wp-content/themes/myTheme/home-video.php');

＆＃13;

我确定我对PHP功能与JS / AJAX功能的时机感到困惑，但我真的走到了尽头。如果有人帮我指出正确的方向，我将不胜感激。

Answer 1

ajax在wordpress中以不同的方式处理（参见CODEX）

你的header.php中的

声明了你的ajax变量。

<script>var ajaxURL = '<?php echo esc_js(admin_url('admin-ajax.php'));?>';</script>

在你的functions.php

中

function Get_The_Header()
{
    if($_POST['whichOne'] == 'video'){
        get_template_part('home-video');
    } else {
        get_template_part('home-thumbnail');
    }
    exit();
}
add_action('wp_ajax_nopriv_Get_The_Header', 'Get_The_Header');
add_action('wp_ajax_Get_The_Header', 'Get_The_Header');

最后是你的JS

function get_header(){
    "use strict";
    var whichOne = "thumbnail";
    if (window.innerWidth >= 768) {
        whichOne = "video";
    }
    var data = {
        action: 'Get_The_Header',
        whichOne: whichOne,
    };
    $.post(ajaxURL, data, function(result) {
        $("#theDiv").html(result);
    }); 
}
$(window).on("load", function() {
    get_header();
});
$(window).on("resize", function() {
   get_header();
});

Answer 2

好的，马克。这就是我对你给我的方向所做的一切。

的functions.php：

function Get_The_Header()
{
	if($_POST['whichOne']=='video'){
		get_template_part('home-video.php');
	} else {
		get_template_part('home-thumbnail.php');
	}
	exit();
}
add_action('wp_ajax_nopriv_Get_The_Header', 'Get_The_Header');
add_action('wp_ajax_Get_The_Header', 'Get_The_Header');

外部JS文件：

jQuery(function($) {
  "use strict";
  var whichOne = "thumbnail";
  $(window).on("load", function() {
    if (window.innerWidth >= 768) {
      var data = {
        action: 'Get_The_Header',
        whichOne: 'video',
      };
      $.post(ajaxURL, data, function(result) {
        $("#theDiv").html(result);
      });
    } else {
      whichOne = "thumbnail";
    } //end IF for screen detection
  }); //end listener function
}); //end jQuery function

请尽可能让我知道我做错了什么。谢谢你的帮助！

使用AJAX根据屏幕大小交换<div>内容

2 个答案: