javascript - 发送表单数据时显示ajax不正确的结果

Question

我一直在学习 ajax，方法是学习一些在线教程并在遇到困难时阅读一些 stakoverflow 帖子。

但是我遇到了一个非常奇怪的问题(对于更有经验的用户来说可能并不奇怪)，我只是想不通。我将永远感激任何能够在这里帮助我的人。

我正在执行以下操作:让用户根据锦标赛、轮次和运动类型搜索比赛结果

SportType(填充)-> Tournament(填充)-> Round

当用户点击提交时，根据上面的选择显示结果

示例

我的问题

当我在没有其他数据的干净页面上运行下面的脚本时，它运行良好。但是当我将这段代码添加到我现有的页面之一时，会发生以下情况:

当我点击提交时，它就像一个获取请求被发送到页面上包含的所有其他表单，这里是我的意思的一个例子。

• 用户点击运动类型:GOOD

• 用户点击次数 roundNr:GOOD

• 用户点击提交问题

发送的 GET 请求包含以下所有内容:并且显示了一个完全错误的页面，而不仅仅是显示我的查询结果

同样:如果我在没有其他数据的页面上运行我的代码，它可以正常工作，但是当我将它合并到另一个页面时，我会遇到上述问题

无需重新加载即可提交表单的代码

jQuery(document).click(function(e){
    var self = jQuery(e.target);
    if(self.is("#resultForm input[type=submit], #form-id input[type=button], #form-id button")){
        e.preventDefault();
        var form = self.closest('form'), formdata = form.serialize();
        //add the clicked button to the form data
        if(self.attr('name')){
            formdata += (formdata!=='')? '&':'';
            formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
        }
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: formdata, 
            success: function(data) {
                console.log(data);
            }
        });
    }
});

表单下方的 PHP

  if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
       $sport = $_POST['sport'];
       $round = $_POST['round'];
       $tournament=$_POST['tournament'];

       echo $sport;
       echo $round;
       echo $tournament;

    }

我希望我的问题是有道理的，并且有人可以告诉我哪里出了问题，如果您需要任何其他信息，请告诉我

可能值得一提的是我在 fancybox i-frame 中运行这个脚本

更新

问题是我所在的页面显示在 iframe 中...这很奇怪？

HTML代码

<label>Sport :</label> 
<form method="post" id="resultForm" name="resultForm">
<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>

Answer 1

您的表单 没有action，所以它总是会向当前页面发送请求。将 action 设置为您要提交到的页面。