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

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

如何在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='http://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);
				}
			}
		}

这段代码的意思是向服务端的http://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,你传递数据更方便了。

编辑 杨

我们是一群WordPress的爱好者,爱它的简单快捷,爱它的变化多样。

或许您还喜欢下面的文章

6 条评论

    • 编辑 杨
      2016-09-26 在 11:24
      回复

      地板

    • 编辑 杨
      2016-09-28 在 10:32
      回复

      呵呵呵。

    • 编辑 杨
      2016-09-28 在 10:32
      回复

      共同学习。共同进步。

留下一条回复

关闭