如何在WordPress插件中使用Ajax？

我有一个带有2个下拉框的Wordpress网站。 当我在第一个下拉框中选择一个选项时，我希望用PHP函数中的数据刷新第二个选项。 为此，我需要ajax。 但我正在努力将ajax绑定到Wordpress中。

HTML看起来像这样：

 
 
   
 
 
  Status Sales Rentals Foreclosure  
 
  Price (min) 100.000 200.000 300.000 400.000  

现在，例如当用户选择“Sales”时，我希望使用PHP数组中的匹配价格重新加载第二个选择标记。

PHP函数如下所示：

   '120,000', '120000' => '200.000', '130000' => '300.000', ); // Set price (max) to select $fields['max']['type'] = 'select'; // Set price (max) select options $fields['max']['data'] = array( '100000' => '120,000', '120000' => '200.000', '130000' => '300.000', ); } else if($selectedStatus == "rent") { // Set price (min) to select $fields['min']['type'] = 'select'; // Set price (min) select options $fields['min']['data'] = array( '200' => '200', ); // Set price (max) to select $fields['max']['type'] = 'select'; // Set price (max) select options $fields['max']['data'] = array( '200' => '200', ); } echo $fields; 

我将jQuery Ajax调用保存在一个单独的.js文件中。 代码如下：

  jQuery(document).ready(function() { jQuery(".listing-search-status.select[name='status']").change(function() { if (this.value == "sale") { jQuery.ajax({ type: "POST", url: "http://siradjov.anex.at/playground/wp-content/plugins/wpcasa-extended-search-status-price-chain-select/wpcasa_custom_prices.php", data: { status : "sale" }, success: function(data) { alert('Sale' + data['min']['data'][0]); } }); } else { if (this.value == "rent") { jQuery.ajax({ type: "POST", url: "http://siradjov.anex.at/playground/wp-content/plugins/wpcasa-extended-search-status-price-chain-select/wpcasa_custom_prices.php", data: { status : "rent" }, success: function(data) { alert('Rent' + data['min']['data'][0]); } }); } } }); }); 

但警报框没有显示出来。 我也没有在Google Chrome控制台上收到任何错误消息。 谁能帮我？

Answer 1

使用Wordpress为您提供的本机方法来利用Ajax请求。

在您的插件文件中，我们需要添加一些操作，以便我们可以发送ajax请求并通过admin-ajax.php文件解析它们。

 add_action('wp_ajax_nopriv_ajax_request', 'ajax_controller'); add_action('wp_ajax_ajax_request', 'ajax_controller'); 

现在我们在插件文件中构建一个ajax控制器。 这样做的目的是充当一个控制器，它将根据ajax请求提供的FN参数切换它的输出（稍后将详细介绍）

 function ajax_controller(){ $ret = ''; //our return variable switch($_REQUEST['fn']): case 'status' : $ret = update_status($_REQUEST['status']); break; endswitch; echo $ret; die(); //this makes sure you don't get a "1" or "0" appended to the end of your request. } 

请注意， update_status()函数是为了封装上面的php代码而创建的。

现在我们有了绑定的动作，以及我们可以无休止地使用的控制器来检索数据。 我们只需要对ajax调用进行一些修改。 首先，我们可以为’租/卖’开关使用三元分配，而不是2个ajax调用，这将清理。 其次，我们需要将url地址更改为/wp-admin/admin-ajax.php文件。

 var $status = (this.value == "sale") ? this.value : 'rent'; jQuery.ajax({ type: "POST", url: "/wp-admin/admin-ajax.php", data: { action: 'ajax_request', fn : 'status', //this is the $_REQUEST['fn'] from above status : $status }, success: function(data){ alert('Sale' + data['min']['data'][0]); } }); 

action参数是必需的， fn是我的编码原则的结果。 action属性必须直接匹配add_action('wp_ajax_nopriv_之后的内容add_action('wp_ajax_nopriv_和add_action('wp_ajax_ 。

这应该解决它。