在Word preSS插件怎样使用Ajax？ [英] How do I use Ajax in a Wordpress plugin?
问题描述
我有一个字preSS现场用2下拉框。当我选择的第一个下拉框中选择一个选项我想：第二个与来自一个PHP函数的数据被刷新。对于我所需要的AJAX。但我挣扎结合AJAX到Word preSS。
I have a Wordpress site with 2 dropdown boxes. When I select an option in the first dropdown box I want the 2nd one to be refreshed with data from a PHP function. For that I need ajax. But I'm struggling with binding ajax into Wordpress.
中的HTML看起来是这样的：
The HTML looks like this:
<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数组匹配的价格被重新加载。
Now when for example the user selects "Sales" I want the second select tag to be reloaded with the matching prices from a PHP array.
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;
我有救我在一个单独的.js文件的jQuery Ajax调用。在code是如下：
I've save my jQuery Ajax call in a separate .js file. The code is the following:
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]);
}
});
}
}
});
});
但警告框显示不出来。我也不获得对谷歌Chrome浏览器的控制台中的任何错误消息。谁能帮我？
But the alert Boxes don't show up. Neither do I get any error messages on Google Chrome's Console. Can anyone help me?
推荐答案
使用这个词preSS提供给您的本机方法利用Ajax请求。
Use the native methods that Wordpress provides to you to leverage ajax requests.
在你的插件文件中，我们需要增加一些动作，这样我们就可以通过发送Ajax请求，并让他们的管理-ajax.php 文件解析。
In your plugin file, we need to add a couple actions so that we can send ajax requests through and have them parsed by the admin-ajax.php file.
add_action('wp_ajax_nopriv_ajax_request', 'ajax_controller');
add_action('wp_ajax_ajax_request', 'ajax_controller');
现在我们建立了我们的插件文件的Ajax控制器。这样做的目的是作为一个控制器，将切换它基于所提供的 FN 参数输出 AJAX 要求（详见后）
Now we build out an ajax controller in our plugin file. The purpose of this is to act as a controller that will switch it's output based on the FN parameter supplied by the ajax request (more on this later)
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 code。
Please note that the update_status() function was created to encapsulate your above php code.
现在我们有一个绑定的操作，我们可以用无休止地检索数据控制器。我们只需做一些修改Ajax调用。首先，我们可以使用三元赋值为租/售开关，而不是2 AJAX调用，将干净的东西了。其次，我们需要改变的URL地址到 /wp-admin/admin-ajax.php 文件。
Now we have the actions bound, and a controller that we can use endlessly to retrieve data. We just need to make a couple modifications to the ajax call. First, we can use ternary assignment for the 'rent/sale' switch, as opposed to 2 ajax calls, which will clean things up. Second, we need to change the url address to the /wp-admin/admin-ajax.php file.
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]);
}
});
在动作参数是必需的， FN 是我的编码原则的结果。该动作属性必须直接匹配什么来后 add_action（'wp_ajax_nopriv _ 和 add_action（'wp_ajax_ 。
The action parameter is required, the fn is a result of my coding principles. The action attribute must directly match what comes after add_action('wp_ajax_nopriv_ and add_action('wp_ajax_.
这应该解决这个问题。
这篇关于在Word preSS插件怎样使用Ajax？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
