如何在Wordpress插件中使用Ajax？

Question

我有一个带有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浏览器的控制台上收到任何错误消息。谁能帮我？

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控制器。这样做的目的是充当一个控制器，该控制器将根据请求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代码而创建的。

现在我们已经绑定了动作，还有一个控制器，我们可以无限使用它来检索数据。我们只需要对ajax调用进行一些修改。首先，我们可以对“ rent /
sale”开关使用三元分配，而不是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_。

这应该解决它。