我有一个带有2个下拉框的Wordpress网站。当我在第一个下拉框中选择一个选项时,我希望第二个选项被PHP函数中的数据刷新。为此,我需要ajax。但是我正在努力将Ajax绑定到Wordpress中。
HTML看起来像这样:
<form method="get" action="http://siradjov.anex.at/playground/"> <div class="form-inner"> <div class="listing-search-main"> <input type="text" class="listing-search-text text" name="s" title="Coach House, Golf Course, Water View, etc" value="unique"> <input type="submit" class="listing-search-submit btn btn-large btn-primary" name="search-submit" value="Search"> </div><!-- .listing-search-main --> <div class="listing-search-details"> <div class="listing-search-field listing-search-field-select listing-search-field-status"> <select class="listing-search-status select" name="status"> <option value="">Status</option> <option value="sale">Sales</option> <option value="rent">Rentals</option> <option value="foreclosure">Foreclosure</option> </select> <div class="listing-search-advanced " style="display: block;"> <div class="listing-search-field listing-search-field-select listing-search-field-min"> <select class="listing-search-min select" name="min"> <option value="">Price (min)</option> <option value="100000">100.000</option> <option value="200000">200.000</option> <option value="300000">300.000</option> <option value="400000">400.000</option> </select>
现在,例如,当用户选择“销售”时,我希望第二个选择标签重新加载来自PHP数组的匹配价格。
PHP函数如下所示:
<?php $selectedStatus = $_POST['status']; if($selectedStatus == "sale") { // Set price (min) to select $fields['min']['type'] = 'select'; // Set price (min) select options $fields['min']['data'] = array( '100000' => '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浏览器的控制台上收到任何错误消息。谁能帮我?
使用Wordpress提供给您的本机方法来利用Ajax请求。
在您的插件文件中,我们需要添加几个操作,以便我们可以发送ajax请求并由admin-ajax.php文件进行解析。
admin-ajax.php
add_action('wp_ajax_nopriv_ajax_request', 'ajax_controller'); add_action('wp_ajax_ajax_request', 'ajax_controller');
现在,我们在插件文件中构建了一个ajax控制器。这样做的目的是充当一个控制器,该控制器将根据请求FN提供的参数来切换其输出ajax(稍后会详细介绍)
FN
ajax
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代码而创建的。
update_status()
现在我们已经绑定了动作,还有一个控制器,我们可以无限使用它来检索数据。我们只需要对ajax调用进行一些修改。首先,我们可以对“ rent / sale”开关使用三元分配,而不是2个ajax调用,这将清除一切。其次,我们需要将URL地址更改为/wp-admin/admin-ajax.php文件。
/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_。
action
fn
add_action('wp_ajax_nopriv_
add_action('wp_ajax_
这应该解决它。