使用ajax和php提交表单

Hi I have a page that lets a user view results for a certain tournament and round

嗨，我有一个页面可以让用户查看某一赛事的结果

User will select sport then tournament is populated based on sport selection then user will select round which is populated based on tournament selection

用户将选择运动然后根据运动选择填充锦标赛，然后用户将根据比赛选择填充round

When all is done user press Submit button which will look up the results for the result based on tournament and round selected

当全部完成后，用户按Submit按钮，根据所选的比赛和轮数查找结果

My code is working great:

我的代码运行得很好:

mainPage.php

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

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

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

    }
}
?>

EXAMPLE

例子

Sport=>Football; Tournament=>EPL; Round=>5;

运动= >足球;比赛= > EPL;圆= > 5;

Assuming the above is selected when the user clicks submit the code will query select results from someTable Where sport='Football' AND...

假设在用户单击submit时选择了上面的内容，那么代码将查询某个表中的select结果，其中包含sport='Football'和…

My Problem

我的问题

I get the data from the selectboxes by using a simple php isset() function

我使用一个简单的php isset()函数从selectbox获取数据。

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

Now my problem is when submit is clicked everything works BUT the form gets reloaded, which is what I don't want

现在我的问题是，当提交被点击时，所有东西都可以工作，但是表单被重新加载，这是我不想要的

Im looking for an AJAX equivalent of isset() or a way for the data to be submitted without the form reloading

我正在寻找一个与isset()等价的AJAX，或者一种不需要重新加载表单就可以提交数据的方法

Any ideas/help will greatly be appreciated

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

3 个解决方案

#1

There is a different ways to avoid the reload of a submit form.

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

A solution would be to handle the submit action of the form and return 'false' ( Example here and here) or preventing the default action ( Example here )

一个解决方案是处理表单的提交动作，并返回“false”(这里和这里的例子)，或者防止默认动作(这里的例子)

You can also replace the input type submit for an input type button (or button), and handle the click button action instead of handling the form submit action. This would be an easy workaround to most of your 'form submit' problems, but is a worst solution in the semantic and valid code point of view.

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

#2

You can do the form submission from JQuery as an AJAX request and do the resulting in the success.

您可以将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();
    });
}); 

#3

Initially load all the values in Sport: Dropdown

首先载入所有的值在运动:下拉

Then dynamically populate the Tournament and 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);
        }
    });
});

In your Corresponding PHP get_round.php

在相应的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>';
    }
}