用ajax和php提交表单

Question

您好，我有一个页面可以让用户查看特定锦标赛和回合的结果

用户将选择运动，然后根据运动选择填充锦标赛，然后用户将选择根据锦标赛选择填充的回合

所有完成后，用户按下提交按钮，该按钮将根据所选的锦标赛和回合查找结果

我的代码运行良好：

ma​​inPage.php

<script type="text/javascript">
$(document).ready(function()
{
 $(".sport").change(function()
 {
  var id=$(this).val();
  var dataString = 'id='+ id;

  $.ajax
  ({
   type: "POST",
   url: "get_sport.php",
   dataType : 'html',
   data: dataString,
   cache: false,
   success: function(html)
   {
      $(".tournament").html(html);
   } 
   });
  });


 $(".tournament").change(function()
 {
  var id=$(this).val();
  var dataString = 'id='+ id;

  $.ajax
  ({
   type: "POST",
   url: "get_round.php",
   data: dataString,
   cache: false,
   success: function(html)
   {
    $(".round").html(html);
   } 
   });
  });

});
</script>

get_sport.php

<label>Sport :</label> 
<form method="post">
<select name="sport" class="sport">
<option selected="selected">--Select Sport--</option>
<?php
 $sql="SELECT distinct sport_type FROM events";
 $result=mysql_query($sql);
 while($row=mysql_fetch_array($result))
 {
  ?>
        <option value="<?php echo $row['sport_type']; ?>"><?php echo $row['sport_type']; ?></option>
        <?php
 } 
?>
</select>

<label>Tournamet :</label> <select name="tournament" class="tournament">
<option selected="selected">--Select Tournament--</option>
</select>


<label>Round :</label> <select name="round" class="round">
<option selected="selected">--Select Round--</option>
</select>
<input type="submit" value="View Picks" name="submit" />
</form>

get_round.php

if($_POST['id'])
{
    $id=$_POST['id'];
    $sql="SELECT DISTINCT round FROM events WHERE tournament='$id'";
    $result=mysql_query($sql);
    ?>
    <option selected="selected">Select Round</option><?php
    while($row=mysql_fetch_array($result)){
    ?>
    <option value="<?php echo $row['round'] ?>"><?php echo $row['round'] ?></option>
    <?php

    }
}
?>

示例

运动=>足球；锦标赛=>EPL；回合=>5；

假设用户点击提交时选择了上面的代码会查询select results from someTable Where sport='Football' AND...

我的问题

我使用一个简单的 php isset() 函数从选择框中获取数据

if(isset($_POST['submit'])){
    echo $sport=$_POST['sport'];
    echo $tour=$_POST['tournament'];
    echo $round=$_POST['round'];
    :
    :

现在我的问题是，当点击 submit 时一切正常，但表单被重新加载，这是我不想要的

我正在寻找与 isset() 等效的 AJAX 或一种提交数据的方式无需重新加载表单

任何想法/帮助将不胜感激

Answer 1

您可以将 JQuery 的表单提交作为 AJAX 请求进行并执行结果。

jQuery(document).ready(function(){

    jQuery('#form').submit(function(ev) {

        $.ajax({
            url     : 'url',
            type    : 'POST',
            dataType: 'json',
            data    : $('#form').serialiseArray(),
            success : function( data ) {
               // Populate the result
            }
        });

        ev.preventDefault();
    });
}); 

Answer 2

有不同的方法可以避免重新加载提交表单。

解决方案是处理表单的提交操作并返回“false”（Example here 和 here）或阻止默认操作（Example here）

您也可以将输入类型提交替换为输入类型按钮（或按钮），并处理单击按钮动作而不是处理表单提交动作。对于大多数“表单提交”问题，这将是一个简单的解决方案，但从语义和有效代码的角度来看，这是一个最糟糕的解决方案。

Answer 3

首先加载Sport: Dropdown中的所有值

然后动态填充Tournament 和Round

// To Trigger Sport Change
$(".sport").change(function () {

    var selected_sport = $(".sport").val();
    var dataString = 'sport=' + selected_sport;
    var urlAddress = "get_sport.php";
    $.ajax({
        url: urlAddress,
        cache: false,
        method: 'post',
        data: dataString,
        dataType: 'html',
        success: function (result_data) {
            $(".tournament").html(result_data);
            // This will append the tournament drop-down dynamically
        }
    });
});

// To Trigger Tournament Change
$(".tournament").change(function () {

    var selected_sport = $(".sport").val();
    var selected_tournament = $(".tournament").val();

    var dataString = 'sport=' + selected_sport + '&tournament=' + selected_tournament;
    var urlAddress = "get_round.php";
    $.ajax({
        url: urlAddress,
        cache: false,
        method: 'post',
        data: dataString,
        dataType: 'html',
        success: function (result_data) {
            $(".round").html(result_data);
        }
    });
});

在你对应的PHP中get_round.php

while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)) {
    foreach ($row as $r) {
        $round = $r['round'];
        echo '<option value = "' . $round . '">' . $round . '</option>';
    }
}