用ajax和php提交表单

Posted 2023-02-24

【中文标题】用ajax和php提交表单

【英文标题】：submitting form with ajax and php

【发布时间】：2015-09-15 18:13:04

【问题描述】：

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

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

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

我的代码运行良好：

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 或一种提交数据的方式无需重新加载表单

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

【问题讨论】：

“我正在寻找一个与 isset() 等效的 AJAX”——这没有意义。

【参考方案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();
    );
); 

【讨论】：

此方法已弃用，应使用 event.preventDefault();而是。

【参考方案2】：

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

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

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

【参考方案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>';
    
 

【讨论】：

Shadab 谢谢你试一试，让你知道结果如何......谢谢你的回答

不...我知道如何填充下拉列表，一旦选择了所有值（在所有 3 个选择框中），我需要查询我的数据库

但是我给你+1的努力

+1 仅仅是因为努力还是因为它是正确的？