在 Wordpress 中設置 AJAX 請求時出現問題（使用 JQuery）

Question

我收到了“500（內部服務器錯誤）”的錯誤消息。我在這里嘗試了很多解決方案，但它們似乎沒有改變我的結果，我不確定為什么。我仍在學習Wordpress和Ajax所以任何幫助表示贊賞！

我的functions.php ：

<?php
// register and enqueue custom js scripts
add_action('wp_enqueue_scripts', 'hyix_enqueue_custom_js');
function hyix_enqueue_custom_js() {
    //enqueue zip-search-popup.js
    wp_enqueue_script('zip-search-popup', get_stylesheet_directory_uri().'/js/zip-search-popup.js', array('jquery'), false, true);
    wp_localize_script('zip-search-popup', 'from_php', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
} 
//hook zip-search function into ajax
add_action( 'wp_ajax_zip_search', 'zip_search' );
//same hook for users not logged in
add_action( 'wp_ajax_nopriv_zip_search', 'zip_search' );

//query for pulling in shipping data
function zip_search() {
  $submittedZip = $_REQUEST['submittedZip'];
  global $wpdb;
  // The SQL query
  $response  =  $wpdb-> get_results("SELECT {$wpdb->prefix}woocommerce_shipping_zones.zone_name ".
              "FROM {$wpdb->prefix}woocommerce_shipping_zone_locations ".
              "INNER JOIN {$wpdb->prefix}woocommerce_shipping_zones ".
              "ON {$wpdb->prefix}woocommerce_shipping_zone_locations.zone_id = {$wpdb->prefix}woocommerce_shipping_zones.zone_id ".
              "WHERE location_code = '$submittedZip' ");
  $response = array(
    'request' => $_REQUEST,
    'zip' => $submittedZip,
    'test' => 'is ok',
  );
  wp_send_json( $response );
  // echo $response;
  die();
}

我的 jQuery 文件 - zip-search-popup.js ：

  (function($) {
      $(document).ready(function() {
        $('.zip-bar-button').click(function(event) {
          event.preventDefault();
          submittedZip = $("#zipcode-bar-input").val();
          console.log(submittedZip);
          $.ajax({
            url: from_php.ajax_url,
            type: "POST",
            dataType: "json",
            data: {
              action : 'zip_search',
              submittedZip : submittedZip,
            },
            success: function (response) {
              console.log("this is the response: " + response);
              alert("working");
            },
          })
        })
      })
    })(jQuery);

Answer 1

要找出出了什么問題，請檢查您的 php 服務器的 error.log..？

Answer 2

這是您的工作code ，您需要將此code添加到您的child-theme functions.php我對代碼進行了很少的更改，就像您在wordpress 中的wp_enqueue_scripts 。

子主題（functions.php）

function my_custom_scripts() {

    $myvars = array( 
        'ajaxurl' => admin_url( 'admin-ajax.php' ) //admin ajax
    );
  
  wp_enqueue_script( 'my-ajax-request', get_stylesheet_directory_uri() . '/js/zip-search-popup.js', array( 'jquery' ),'',true );
    wp_localize_script( 'my-ajax-request', 'MyAjax', $myvars );

}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );

//hook zip-search function into ajax
add_action( 'wp_ajax_zip_search', 'zip_search' );
//same hook for users not logged in
add_action( 'wp_ajax_nopriv_zip_search', 'zip_search' );

//query for pulling in shipping data
function zip_search() {
  $submittedZip = $_REQUEST['submittedZip'];
  global $wpdb;

  //The SQL query
  $response  =  $wpdb-> get_results("SELECT {$wpdb->prefix}woocommerce_shipping_zones.zone_name ".
              "FROM {$wpdb->prefix}woocommerce_shipping_zone_locations ".
              "INNER JOIN {$wpdb->prefix}woocommerce_shipping_zones ".
              "ON {$wpdb->prefix}woocommerce_shipping_zone_locations.zone_id = {$wpdb->prefix}woocommerce_shipping_zones.zone_id ".
              "WHERE location_code = '$submittedZip' ");
  $response = array(
    'request' => $_REQUEST,
    'zip' => $submittedZip,
    'test' => 'is ok',
  );
  wp_send_json( $response );
}

子主題（js 文件 - jQuery 代碼） zip-search-popup.js

$(document).ready(function () {
    $('.zip-bar-button').click(function (event) {
        event.preventDefault();
        submittedZip = $("#zipcode-bar-input").val();
        console.log(submittedZip);
        $.ajax({
            url: MyAjax.ajaxurl,
            type: "POST",
            dataType: "json",
            data: {
                action: 'zip_search',
                submittedZip: submittedZip,
            },
            success: function (response) {
                console.log("this is the response: " + response);
                alert("working");
            },
        })
    })
})