javascript - 在 Wordpress 站点中进行 AJAX 调用时出现问题

Question

我遇到了 Wordpress 站点功能的 AJAX 部分的一些问题，该功能采用在表单上输入的邮政编码，使用 PHP 函数查找邮政编码是否指向特定位置并返回指向该位置的永久链接。

我的第一个问题是关于我构建的表单。现在我的表单操作是空白的，因为我不想让表单真正去任何地方，只需进行 AJAX 调用即可。我需要在表单中做些什么来指示输入的数据应该转到 AJAX 函数吗？

<form id="zipcode" action="" method="post"><input class="form-control search-input" autocomplete="off" name="zipcode" type="text" value="" placeholder="Enter Zip Code" />

我的下一个问题是关于 functions.php 文件中的过滤器函数。我不确定如何将表单数据传递给过滤器数据，这是我在下面尝试过的方法，我还包含了返回永久链接的 zip_search 函数。

/**
* LOCATION SEARCH FILTER AJAX
* 
* call location search filter ajax
*
* @return ajax json data via function.
*/
add_action( 'wp_ajax_locations_search', 'prefix_ajax_locations_search' );
add_action( 'wp_ajax_nopriv_locations_search', 'prefix_ajax_locations_search' ); //used for handling AJAX requests from unauthenticated users

function prefix_ajax_zip_search_filter() {
    // Handle request then generate response using WP_Ajax_Response
    $zipcode = $_POST[ 'zipcode' ];

    //return our filtered location data
    echo zip_search($zipcode);

    wp_die(); // this is required to terminate immediately and return a proper response 
}

//Function that contains zip code search functionality
function zip_search($userZip){

    $args = array(
    'posts_per_page'    => -1,
    'post_type'         => 'Locations'
    );

$wp_query = new WP_Query($args); 

if( $wp_query->have_posts() ): while( $wp_query->have_posts() ) : $wp_query->the_post();
      $zipField=get_field('zip_codes_services');

          $zipString = $zipField . ', ';        

          $array = explode(', ' , $zipString); //split string into array seperated by ', '

        foreach($array as $value) //loop over values
        {

            if($value==$userZip){
                $post_id = get_the_ID();
                $permalink=get_permalink($post_id);                 
                return ($permalink); //print
           }    

        }
       endwhile; 
       wp_reset_postdata(); 
endif;
}

最后，我创建了一个单独的 js 文件夹，其中包含如下所示的 scripts.js，现在我只想在我的表单不为空时将其重定向到示例站点。现在，当我将邮政编码提交到表单中时，唯一发生的事情就是页面刷新。

    $("form#zipcode").on("submit", function(event) {
    $('form#zipcode .clear-button').addClass('active');
    event.preventDefault();

    zipcode_search(zip_search_filter());
    });    

function zipcode_search(zip_search_filter) {
    //add ajax loader
    $("form#zipcode .ajax-content-loader").addClass("active");

    //process the form
    $.ajax({
        type: "POST", // define the type of HTTP verb we want to use (POST for our form)
        url: ajaxcall.ajaxurl,
        data: {
            action: "locations_search", //calls the function in the functions.php file
            zip_search_filter: zip_search_filter
        },
        success: function(response) {
            //redirect to new page
            if (response != "") {
                    alert("You will now be redirected.");
                    window.location = "http://www.example.com/";
            }

            //remove the loader
            $("#zipcode .ajax-content-loader").removeClass(
                "active"
            );
        }
    });

    return false; //prevents the form from submitting to a new page.
}

有没有人有在 Wordpress 中使用 AJAX 调用的经验，欢迎提供任何建议。

Answer 1

这听起来像是在调用您的函数之前提交了表单。尝试移动 event.preventDefault() 以便首先调用它，如下所示:

$("form#zipcode").on("submit", function(event) {
event.preventDefault(); //call this first
$('form#zipcode .clear-button').addClass('active');

zipcode_search(zip_search_filter());
});    

检查你的语法，=! 应该是 !=;

//correct syntax
if (data != "") {
    alert("You will now be redirected.");
    window.location = "http://www.example.com/";
}

此外，您的success 函数返回response，但您引用的是data。更改代码以便引用正确的对象:

 success: function(response) {
        //redirect to new page
        if (response != "") {
                alert("You will now be redirected.");
                window.location = "http://www.example.com/";
        }

或者...

 success: function(data) {
        //redirect to new page
        if (data != "") {
                alert("You will now be redirected.");
                window.location = "http://www.example.com/";
        }