如何在WordPress中使用jQuery ajax向服务端传递参数？

导语：这个算是标题党，因为在任何网站框架中都可以使用jQuery.ajax，不一定非得是WordPress，只要你使用了jQuery，都可以使用jQuery ajax来传递参数。

客户端的代码实现

在客户端可以使用多种方法来传递参数的，这里就是说说POST的方式，因为这个叶子使用过。

加载jQuery

要使用jQuery ajax，你肯定是要在网页的头部加载jQuery.js文件。

<script src="http://www.wordpress.com/wp-includes/js/jquery/jquery.js?ver=1.12.4" type="text/javascript"></script>

注意了jQuery.js一定要加载在最前面。当然，在WordPress中，系统一般都默认加载了。

激活jQuery ajax的标签

激活jQuery ajax的标签可以是任何的网页元素，比如一个a标签，这里以a标签为例。

<a href="" id="ajax">ajax</a>

在这里我设置了一个ID，那么等一下这个ID会在jQuery(document).ready用到，它会激活动作。

具有动作的JS

这时，你需要自己来创建一个JS文件，来执行你想实现的动作，然后把它加载在网页中，页面头部或者是底部都可以。

比如叶子现在的例子，举个栗子。

jQuery(document).ready(function(){
	jQuery('#ajax').click(function () {
            var url='https://www.wordpressleaf.com/';
		jQuery.ajax({ url: url+'get-test',
			action: 'test',
			data: {'char': 'value','test':'test'},
			type: 'POST',
			success: function(output) {
				jQuery("#resultList").html(output);
				}
			}
		}

这段代码的意思是向服务端的https://www.wordpressleaf.com/get-test页面发起POST请求，然后，成功后再将结果输出到页面的一个ID叫做resultList的元素中。

服务端的代码实现

其实服务端是相当简单的，以PHP语言为例：

<?php 
$char=$_POST['char']; 
$test=$_POST['test']; 
echo $char.'<br/>';
echo $test;

这个代码的意思就是接受客户端传递过来的POST的值，然后显示出来。

这个结果会显示在客户端一个ID叫做resultList的元素中。

结束

你学会了吗？有了jQuery ajax，你传递数据更方便了。