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

时间:2014-02-20 19:00:15

标签: php jquery ajax forms post

本周我一直在努力解决这个问题。

我正在使用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>';

1 个答案:

答案 0 :(得分: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());
}