Question

我有以下表单，当我点击提交按钮时，我试图在div中显示结果，其中ID为“storelisting”而没有页面刷新。

问题是，当我点击提交按钮时，它仍然只是重新加载页面？当页面刷新时，它甚至不会在商店列表ID潜水中显示任何结果吗？

<form id="mullerlocator" method="POST">
            <label>Plz: </label>
        <input type="text" name="postcode" maxlength="6" style="display:inline!important; width:100px!important"/> <label>Radius: </label>
        <select name="radius""><option value='5'>5 km</option><option value='10'>10 km</option><option value='15'>15 km</option><option value='20'>20 km</option></select><br />
        <input type="submit" name="locationsearch" id="mullersubmit" value="Search" style="display:inline!important" />
        </form>
        <br />
        <div id="storelisting"></div>
         <script>
                  $( "#mullersubmit" ).submit(function( event ) 
                  {
                        $.ajax({
                              type: "POST",
                              url: "http://www.kissnypro.de/test2/test.php",
                              data: $( "#mullerlocator" ).serialize(),
                              success: function(data){
                                  //print here 
                                  $("#storelisting").html(data);
                              },
                              dataType: 'html' // for json response or 'html' for html response
                             });
                  }
            </script>

这是我的test.php代码

if(isset($_POST['locationsearch']))
{
    $postcode = $_POST['postcode'];
    $distance = $_POST['radius'];
     echo "Suche mit $distance km von $postcode<br />
      <table class='table table-responsive'>
                 <thead><th>address</th><th>Distance</th></thead>";

                        $mullerconn = mysqli_connect('localhost', '....', '....') or die('db connect error: ' . mysqli_error());
                        mysqli_select_db($mullerconn, '....') or die('could not select database');

                        $sqlstring = "SELECT * FROM german_zipcodes WHERE zipcode = $postcode";
                        $result = mysqli_query($mullerconn, $sqlstring);

                        $row = mysqli_fetch_assoc($result);

                        $lng = $row["longitude"] / 180 * M_PI;
                        $lat = $row["latitude"] / 180 * M_PI;
                        mysqli_free_result($result);

                        //lets see if any store matches the exact zipcode entered
                        $exactlocationsql = mysqli_query($mullerconn, "SELECT * FROM muller_locations WHERE zip_code ='$postcode'");
                        $numexactrows = mysqli_num_rows($exactlocationsql);
                        $exactrow = mysqli_fetch_array($exactlocationsql);
                        extract($exactrow);

                        $str = "<tr><td>$street_address $city $zip_code</td><td> 0 km</td></tr>";

                        $sqlstring2 = "SELECT DISTINCT german_zipcodes.zipcode,(6367.41*SQRT(2*(1-cos(RADIANS(german_zipcodes.latitude))*cos(".$lat.")*(sin(RADIANS(german_zipcodes.longitude))*sin(".$lng.")+cos(RADIANS(german_zipcodes.longitude))*cos(".$lng."))-sin(RADIANS(german_zipcodes.latitude))* sin(".$lat.")))) AS Distance FROM german_zipcodes AS german_zipcodes WHERE (6367.41*SQRT(2*(1-cos(RADIANS(german_zipcodes.latitude))*cos(".$lat.")*(sin(RADIANS(german_zipcodes.longitude))*sin(".$lng.")+cos(RADIANS(german_zipcodes.longitude))*cos(".$lng."))-sin(RADIANS(german_zipcodes.latitude))*sin(".$lat."))) <= '".$distance."') ORDER BY Distance desc LIMIT 5";

                        $result = mysqli_query($mullerconn, $sqlstring2) or die('query failed: ' . mysqli_error());

                        while ($row = mysqli_fetch_array($result))
                        {
                            $thezipcodeis = $row['zipcode'];
                            $thedistance = round($row['Distance']);

                            //lets look for muller stores in this location 
                            $mullersql = mysqli_query($mullerconn, "SELECT * from muller_locations WHERE zip_code ='$thezipcodeis' order by city desc");
                            $numlocations = mysqli_num_rows($mullersql);
                            while($locationrows = mysqli_fetch_array($mullersql))
                            {
                                extract($locationrows);
                                $str .= "<tr><td>$street_address $city $zip_code</td><td> $thedistance km</td></tr>";
                            }     



                        }

                        if($numexactrows == 0 && $numlocations == 0)
                        {
                            echo "Keine Muller-Standorte haben übereinstimmende Suchkriterien gefunden";
                        }   
                         else
                        {
                            echo "$str";
                        }
    echo "</table>";
    }
    mysqli_close($mullerconn);

Answer 1

默认情况下，表单提交将导致页面刷新并回发到服务器以供进一步执行。由于您正在使用JavaScript将表单内容发送回服务器进行处理，因此在JavaScript函数中添加以下行：

$( "#mullersubmit" ).submit(function( event ) {
    event.preventDefault(); // <---- Add this line

    $.ajax({
        type: "POST",
        url: "http://www.kissnypro.de/test2/test.php",
        data: $( "#mullerlocator" ).serialize(),
        success: function(data) {
            // print here 
            $("#storelisting").html(data);
        },
        dataType: 'html' // for json response or 'html' for html response
    });
});

阻止default表单事件将阻止页面在表单提交时重新加载。

Answer 2

这会阻止实际提交

$(function() {
    $('form#mullerlocator').on('submit', function(e) {
        $.post('test.php', $(this).serialize(), function (data) {
            $("#storelisting").html(data);
        }).error(function() {
            // This is executed when the call to test.php failed.
        });
        e.preventDefault();
    });
});

Ajax显示结果没有页面刷新

2 个答案: