如何在WordPress中使用AJAX,无需刷新即可发送数据?

时间:2018-07-25 作者:bckelley

我试图在选择字段中用客户名称中的地址填充几个文本区域。

这是我的may select字段

<select id="customers">
  <option value="None Selected"></option>
  <?PHP
    $customers = $wpdb->get_results("SELECT * FROM _cif_customers_table;");
    foreach ($customers as $customer) {
      echo \'<option value="\'.$customer->id.\'">\'.$customer->company.\'</option>\';
    }
  ?>
</select>
我需要把地址放在文本区域,比如

<div class="col-lg-6">
  <fieldset style="text-align:left;padding: 5px; border: 1px solid rgb(128,128,128);">
    <legend>Sold To</legend>
      <textarea style="resize:none;" rows="4" cols="50"></textarea>
  </fieldset>
</div>
<div class="col-lg-6">
  <fieldset style="text-align:left;padding: 5px; border: 1px solid rgb(128,128,128);">
    <legend>Ship To</legend>
      <textarea style="resize:none;" rows="4" cols="50"></textarea>
  </fieldset>
</div>

1 个回复
最合适的回答,由SO网友:Techno Deviser 整理而成

希望这对你有帮助+如果你明白的话,我就给你1英镑。

第一步//您的动态下拉字段

    <select id="customers">
      <option value="None Selected"></option>
      <?PHP
        $customers = $wpdb->get_results("SELECT * FROM _cif_customers_table;");
        foreach ($customers as $customer) {
          echo \'<option value="\'.$customer->id.\'">\'.$customer->company.\'</option>\';
        }
      ?>
    </select>
第二步://使用ajax从customer表中获取数据后,将显示客户数据

<div class="col-lg-6">
          <fieldset style="text-align:left;padding: 5px; border: 1px solid rgb(128,128,128);">
            <legend>Sold To</legend>
              <textarea id="text_area" style="resize:none;" rows="4" cols="50"></textarea>
          </fieldset>
        </div>
第三步://您的ajax使用on change函数

<script>
        $(\'#customers\').on(\'change\', function() {

          //get the value
          var customer_id = $(this).val();
          /// run the ajax
            $.ajax({
                url: \'<?php echo admin_url(\'admin-ajax.php\'); ?>\',  //ajax url
                type: \'post\',
                data: { action: \'customer_data\', customer_id: customer_id },  // ajax parameters
                success: function(data) {

                       $(\'#text_area\').html( data ); // fetch data show on textarea 

                }
            });

        }
        });
        </script>
//函数。php ajax

add_action(\'wp_ajax_customer_data\' , \'customer_data\');  //ajax parameter action
        add_action(\'wp_ajax_nopriv_customer_data\',\'customer_data\');
        function customer_data(){
            $customer_id = $_POST[\'customer_id\']; //id

            //fetch the customer data here .....Your QUERY
            //and return the values.
            die;
            }

结束

相关推荐

通过AJAX添加自定义购物车项目数据添加到购物车

我正在使用这个插件——Woocommerce PDF代金券——它非常好用。但是,在将我的主题的“添加到购物车”自定义到AJAXm之后,它不会在迷你购物车和购物车页面中显示自定义数据。如果我恢复到默认的add-to-cart,效果会很好,但是我的AJAX回调肯定有smth错误。这就是我正在使用的:// JS $add_to_cart.on(‘click’, function(e) { e.preventDefault(); var var_id = $(this).s