AJAX Implementation

时间：2018-11-27 作者：Agreesh V S

我试图基于WordPress中的下拉列表，使用AJAX实现数据库中的数据。控制台中返回400个错误请求的代码。我作为本地主机托管了该页面。

这是我的主题functions.php //我更改了密码

  function my_enqueue_scripts() {
   wp_enqueue_script(\'jquery\');
}
add_action(\'wp_enqueue_scripts\', \'my_enqueue_scripts\');

function fetchData(){
    global $wpdb;

    // this can be improved
    $catId = isset($_REQUEST[\'catId\']);
    if($catId){
        $result_data = $wpdb->get_results("SELECT * FROM  sub_category where categor_id = \'".$catId."\'");
        foreach ($result_data as $data) {
            echo "<option value=\'".$data->id."\'>\'".$data->sub_category_name."\'</option>";
        } 
    }
    die();
}

// add your ajax action to authenticated users only
add_action(\'wp_ajax_fetch_data\',\'fetchData\');

Am also adding the jQuery part here:

<script type="text/javascript">

jQuery(document).ready( function(){

  jQuery(\'#category\').on(\'change\',function (){
      console.log("start1");
      var catId = document.getElementById(\'category\').value;
      console.log(catId);
      jQuery.ajax({
        type: \'POST\',
        url: "<?php echo admin_url( \'admin-ajax.php\' ); ?>",
        data: {
            \'key\':catId,
            \'action\': "fetch_data" // very important
        },
        success : function (data) {
                 jQuery(\'#sub_cat\').html(data);
                }
      });
  });
});

</script>
<form  method="post" name="myform" id="myform">
<table width="200" border="0" cellpadding="10">
  <tr>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
    <th scope="col">&nbsp;</th>
  </tr>
  <tr>
    <td><label>Category</label></td>
    <td><select name="category" id="category" >
          <option value="">Select the category</option>
           <?php
                global $wpdb;
                $result_fromDB = $wpdb->get_results("SELECT * FROM `category`");
                foreach ($result_fromDB as $cat) {
                       echo "<option value=\'".$cat->id."\' selected>".$cat->name."</option>";
                }
           ?>
        </select>
    </td>
    <td></td>
  </tr>
  <tr>
    <td><label>Sub Category</label></td>
    <td>&nbsp;
        <div id="fetch_data"><select name="sub_cat" id="sub_cat">
        <option value=""> Select Sub category</option>  <!--Here I want to return the data-->
    </select></div>
    </td>
  </tr>
</table>

</form>

记住我使用的是内部脚本，请给出一个解决方案。

2 个回复

最合适的回答,由SO网友:Mike 整理而成

首先，在functions.php:

function my_enqueue_scripts() {
   wp_enqueue_script(\'jquery\');
}
add_action(\'wp_enqueue_scripts\', \'my_enqueue_scripts\');

然后，Authenticated 仅限用户（请参阅https://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_nopriv_(action))（也可以在functions.php):

function fetchData(){

    // Not needed anymore, as you manage the case through the `add_action` method
    // if ( ! is_user_logged_in()  ) {
    //    return;
    // }

    // this can be improved
    $catId = isset($_REQUEST[\'catId\']) ? $_REQUEST[\'catId\'] : \'\';
    echo "<option>$catId</option>"; // there was a typo here: `<optio>`

    die();
}

// add your ajax action to authenticated users only
add_action(\'wp_ajax_fetch_data\',\'fetchData\');

// no need for the `nopriv_` action, this one is for anonymous users
// add_action(\'wp_ajax_nopriv_fetch_data\',\'fetchData\');?>

最后是JS脚本。您必须添加action 参数，否则WordPress不知道在后端激发哪个操作（中使用的操作wp_ajax_fetch_data -> fetch_data).此外，对于url，请尝试使用admin_url( \'admin-ajax.php\' ); 而是：

<script type="text/javascript">

jQuery(document).ready( function(){

  jQuery(\'#category\').on(\'change\',function (){
      console.log("start1");
      var catId = document.getElementById(\'category\').value;
      console.log(catId);
      jQuery.ajax({
        type: \'POST\',
        url: "<?php echo admin_url( \'admin-ajax.php\' ); ?>",
        data: {
            \'key\':catId,
            \'action\': "fetch_data" // very important
        },
        cache: false,
        success : function (data) {
                 jQuery(\'#sub_cat\').html(data); 
                    console.log(data);
                }
      });
  });
});

</script>

SO网友:Krzysiek Dróżdż

您会收到400个错误，因为没有为AJAX请求注册回调。

以下是您执行请求的方式：

jQuery.ajax({
    type: \'POST\',
    url: "/mudratcr/wp-admin/admin-ajax.php",
    data: {\'key\':catId},
    cache: false,
    success : function (data) {
        jQuery(\'#sub_cat\').html(data); 
        console.log(data);
    }
});

所以没有action 请求中的参数。

因为您注册了如下回调：

add_action( \'wp_ajax_data\', \'fetchData\' );
add_action( \'wp_ajax_nopriv_data\', \'fetchData\' );

您应该在请求中传递“数据”作为操作：

jQuery.ajax({
    type: \'POST\',
    url: "/mudratcr/wp-admin/admin-ajax.php",
    data: {key: catId, action: \'data\'},
    cache: false,
    success : function (data) {
        jQuery(\'#sub_cat\').html(data); 
        console.log(data);
    }
});

另外，我不会使用硬编码URL来管理ajax。JS中的php文件。如果您将JS文件本地化并通过real admin ajax，那会更好。php文件URL在那里。

结束

小码农CODE

AJAX Implementation

相关推荐

已解决-$wp_admin_bar和AJAX调用