Question

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

enter image description here

用户将选择运动然后根据运动选择填充锦标赛然后用户将选择根据锦标赛选择填充的圆形

完成所有操作后，用户按“提交”按钮，该按钮将根据锦标赛和所选轮次查找结果

我的代码效果很好：

mainPage.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

    }
}
?>

示例

运动=＆GT;足球;比赛=＆GT; EPL;圆=大于5;

假设在用户点击提交时选择了上述代码，则代码将查询select results from someTable Where sport='Football' AND...

我的问题

我使用简单的php isset()函数

从selectbox中获取数据

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

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

我正在寻找AJAX等效的isset（）或提交数据的方式没有重新加载表格

非常感谢任何想法/帮助

Answer 1

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

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

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

Answer 2

您可以将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 3

最初加载Sport:下拉列表中的所有值

然后动态填充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>';
    }
}

用ajax和php提交表单

3 个答案: