西宁网站建设案例:如何在WordPress主题中实现Ajax

西宁网站建设案例

众所周知,Ajax(异步JavaScript和XML)是Web开发中一种非常民主的技术,它允许网页更新内容而无需重新加载或刷新页面。WordPress不仅被广泛用于博客,还被广泛用于CMS。

我在我的项目中多次使用WordPress,并使用WordPress作为CMS构建了Web应用程序。当你的网站或网络应用程序使用WordPress时,您需要在WordPress主题或插件中使用Ajax。

今天,我将向您展示如何通过简单的示例在WordPress主题中实现Ajax。

工作,任务:

假设我们的任务是在下拉框中显示类别,在选择父类别时,根据主类别的选择,子类别应该出现在另一个下拉框中。为了完成我们的任务,让我们一步地走一步。

[地名] 阶地(英语) 1:

首先,创建类别:父类和子类,如下图所示:

如何实现-ajax-in-WordPress-主题

[地名] 阶地(英语) 2:

在WordPress中创建一个模板(我不打算详细介绍WordPress的模板以及它们在WordPress主题中的处理方式),我们将在其中实现Ajax功能。打开一个新的php文件,并以任何名称保存它,就像我用Implement-ajax.php保存它一样。

在新创建的页面中添加以下代码。


以上代码是不言自明的.模板名:实现Ajax是WordPress西宁网站建设案例中模板的名称,函数如get_head();get_fount();用于显示页面的页眉和页脚。

要添加Ajax内容,首先需要在页面中包含jQuery库文件。您可以使用任何JavaScript库,也可以用原始JavaScript调用Ajax。在我们的示例中,我们使用jQueryJavaScriptLibrary实现Ajax,这个库非常流行,在社区中非常活跃。

[地名] 阶地(英语) 3:

让我们在模板中包含jQuery文件,并调用wp_Drodown_Direc西宁网站建设案例tory函数来检索下拉列表中的父类别列表。





为了了解wp_DROPdown_CANTS的参数,请看这里,我添加了第二个下拉列表,以显示其中的子类别。

[地名] 阶地(英语) 4:

让我们添加jQuery代码以获取所选主类别的ID,然后将其传递到Functions.php文件,在该文件中我们将获得父类别ID的子类别,然后将结果发送回页面,而不需要刷新。

$(function(){
			$('#main_cat').change(function(){
					var $mainCat=$('#main_cat').val();

					// call ajax
					 $("#sub_cat").empty();
						$.ajax({
							url:"/wp-admin/admin-ajax.php",
							type:'POST',
														data:'action=my_special_action&主卡蒂=' + $mainCat,

							 success:function(results)
								 {
								//  alert(results);
				$("#sub_cat").removeAttr("disabled");
				$("#sub_cat").append(results);
										}
								   });
						  }
									);
});

在上面的jQuery代码中,我们使用ID#main_cat添加了主类别变更事件下的代码。

 var $mainCat=$('#main_cat').val();

Val()函数从下拉菜单中获取所选项的值,并将其存储在$mainCat变量中。

$("#sub_cat").empty();

现在,在调用Ajax之前,我们将使用西宁网站建设案例以前的值(如果有的话)清空子类别、下拉#sub_cat。我们接下来的jQuery行用于调用AjaxjQuery函数。下面查看Ajax函数的参数:

url:"bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",
type:'POST',														data:'action=my_special_action&主卡蒂=' + $mainCat,

URL参数用于使Ajax在WordPress中工作。因此,请求将发送到admin-ajax.php文件,然后调用函数s.php文件中的钩子,以获取发送到url:“/wp-admin/admin-ajax.php”的已发布数据。

数据参数用于发送随请求西宁网站建设案例一起的值。我们使用了两个带有数据参数的参数:

  1. action
  2. 主卡蒂

[地名] 阶地(英语) 5:

在Functions.php文件中,我们将挂接如下所示的操作:

add_action('wp_ajax_my_special_action', 'my_action_callback');

上面的动作钩子有两个参数。WP_ajax_[这里将是与数据参数“action”一起发送的值],因此它将是wp_ajax_my_Special_action,而第二个参数是回调函数,它将处理数据并将结果发回。上面的动作钩子适用于登录用户。假设您有一些要显示未登录用户的内容,您可以挂起这样的操作

add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');

在为日志用户和非日志用户添加钩子和回调函数之后,我们的最终代码是什么?

function implement_ajax() {
if(isset($_POST['主卡蒂']))
			{
			$categories=  get_categories('child_of='.$_POST['主卡蒂'].'&hide_empty=0');
			  foreach ($categories as $cat) {
				$option .= '';
			  }

			  echo ''.$option;
			die();
			} // end if
}
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');//for users that are not logged in.

[地名] 阶地(英语) 6:

现在,在仪表板中创建一个新页面,并将模板分配给它,如下图所示:

WordPress主题中的Ajax实现

在浏览器中加载页面,您将看到第一个下拉列表,其中加载了父类别。

如何在WordPress主题中实现Ajax

第二次下降是空的,还没有装载。从第一个下拉列表中选择任意值,看看它是如何工作的。

摘要,概要:

这是一个简单的示例,用于向您展示如何在WordPress主题中实现Ajax。您可以将Ajax的这个实现适合您的任何需求。如果你对WordPress的实现有任何问题,你可以在评论中问我。

我可能会在下一篇教程中提出解决方案。因此,不要害怕开发高级主题,或者将其用作项目的CMS。




二维码