Jquery 表单 $_POST php 为空？ - 我的序列化似乎失败了

Question

这周我一直在为这个问题苦苦挣扎。

我正在使用 Jquery 将表单数据提交到同一页面并拉入一个 php 文件。但是 $_POST 似乎总是空的。经过一番搜索，我发现我需要先通过 Jquery 序列化表单的数据，但仍然没有运气。谁能向我解释一下我在这里做错了什么？ - 我已经包含了表单、jquery 和 php

表格

<form action="" method="POST" id="searcher" name="searcher">

        <div class="customsearchul">
        <ul>
        <li><h4>Area:</h4></li>
        <li>All of London<input type="radio" name="area" value="london" checked="checked" /></li>
        <li>North<input type="radio" name="area" value="north" /></li>
        <li>East<input type="radio" name="area" value="east" /> </li>   
        <li>South<input type="radio" name="area" value="south" /></li>
        <li>West<input type="radio" name="area" value="west" /></li>
        <li>Central<input type="radio" name="area" value="central" /></li>
        </ul>  
        </div>

        <div class="customsearchul">
        <ul>
        <li><h4>Music:</h4></li>
        <li>House<input type="checkbox" name="music[]" value="house" /></li>
        <li>Techno<input type="checkbox" name="music[]" value="techno" /></li>
        <li>Trance<input type="checkbox" name="music[]" value="trance" /></li>
        <li>Electronica<input type="checkbox" name="music[]" value="electronica" /></li>  
        <li>Drum and Bass<input type="checkbox" name="music[]" value="drum-and-bass" /></li>
        <li>Garage<input type="checkbox" name="music[]" value="garage" /></li>
        <li>Dubstep<input type="checkbox" name="music[]" value="dubstep" /></li>
        <li>Trap<input type="checkbox" name="music[]" value="trap" /></li>
         </div> 
        </ul> 

        <div class="customsearchul" style="margin-top: 34px;">
        <ul>
        <li>Hip-Hop<input type="checkbox" name="music[]" value="hip-hop" /></li>
        <li>R'n'B<input type="checkbox" name="music[]" value="rnb" /></li>
        <li>Rock<input type="checkbox" name="music[]" value="rock" /></li>
        <li>Indie<input type="checkbox" name="music[]" value="indie" /></li>
        <li>Reggae<input type="checkbox" name="music[]" value="reggae" /></li>
        <li>Retro 80's/90's<input type="checkbox" name="music[]" value="retro" /></li>
        <li>Party Bangers<input type="checkbox" name="music[]" value="party-bangers" /></li>
        <li>Chart Hits<input type="checkbox" name="music[]" value="chart-hits" /></li>
        </ul>  
        </div>

        <div class="customsearchul">
        <ul>
        <li><h4>Search Type:</h4></li>
        <!--<li>Everything<input type="checkbox" name="occasion[]" value="debauchery" /></li> -->
        <li>Nightclubs<input type="checkbox" name="occasion[]" value="nightclub" checked="checked" /></li>
        <li>Events & Tickets<input type="checkbox" name="occasion[]" value="event" checked="checked" /> </li>   
        <li>Live Venues<input type="checkbox" name="occasion[]" value="live-venue" checked="checked" /></li>
        <li>Artist Interviews<input type="checkbox" name="occasion[]" value="artist" checked="checked" /></li>
        <li>Gay & Lesbian<input type="checkbox" name="occasiongay[]" value="gay-lesbian"/></li>
        <li>£££ Big Spender<input type="checkbox" name="occasionmoney[]" value="big-spender"/></li>
        <li>££ Keep it Average<input type="checkbox" name="occasionmoney[]" value="keep-it-average"/></li>
        <li>£ Cheap As Chips<input type="checkbox" name="occasionmoney[]" value="cheap-as-chips"/></li>
        </ul>
        </div>
        <center><input type="image" id="performsearch" src="http://www.*******.com/wp-content/themes/bigformat/images/calltoactionindexbutton.jpg">
        </center>

jQuery

<script type="text/javascript">
jQuery(document).ready(function($){

    $("#performsearch").click(function(){
        $("#displayresults").empty();
        $( "#displayresults" ).html('<center><img src="/wp-content/themes/bigformat/images/ajax-loader.gif"></center>').load( '/wp-content/themes/bigformat/template-home-search.php');

        $("searcher").submit(function(){
    var querystring = $(this).serialize();});
        return false;

    });

});
</script>

PHP

// Get Form Data For search
$locationarea = $_POST['area'];
$music = $_POST['music'];
$occasion = $_POST['occasion'];
$occasiongay = $_POST['occasiongay'];
$occasionmoney = $_POST['occasionmoney'];

echo 'User has selected';
print_r($_POST);
var_dump($_POST);
echo '<br><br>';

Answer 1

$("searcher") 在您的情况下不会做任何事情...您正在使用元素选择器，它正在寻找 <searcher> 元素。您应该使用 ID 选择器。

将$("searcher") 更改为$("#searcher")。

要实际发布您的表单，请使用以下内容：

$("searcher").submit(function(event) {
    // Prevent form from submitting the normal way
    event.preventDefault();

    $("#displayresults").html('<center><img src="/wp-content/themes/xxx/images/ajax-loader.gif"></center>').load( '/wp-content/themes/xxx/template-home-search.php');

    // Get URL from Form action attribute instead of window.location
    $.post($(this).attr("action"), $(this).serialize());
}