无需重新加载即可显示 MySQL 结果... AJAX 失败

Question

在不重新加载页面的情况下尝试获取 MySQL 查询的结果时遇到了很大的麻烦。 我有 2 个文件：index.php 和 action.php

我的查询工作正常，但 AJAX 无法正常工作，我在尝试数小时和数小时将结果加载到 .success div 中而不重新加载时变得很生气。

非常感谢您的帮助！

index.php

//query SQL here then 

<form method="POST" name="form" id="form1">

    <select  name="province"> 
        <option>PROVINCE</option>
        <?php while($data = mysql_fetch_array($result)) { ?> 
            <option value="<?php echo $data['id_province']; ?>">
            <?php echo $data['province']; ?></option>
        <?php } ?>
    </select>

    <select name="candidat">
        <option>CANDIDAT</option>
        <?php 
            $result = mysql_query($query);
            while($data = mysql_fetch_array($result)) { ?>
                <option value="<?php echo $data['id_candidat']; ?>">
                <?php echo $data['pren1']; ?> <?php echo $data['nom_candidat']; ?></option>

                <?php
                    $id = $data['id_candidat'];
                    if ($id === $id) {
                        break;
                    }       
                } ?>
    </select>

    <br/>
    <input type="submit" class="submit" name="submit" value="ok" />

</form> 

然后用于显示结果（在同一页面中）

<div id="success">
    <?php include("action.php"); ?> 
</div>

action.php

<?php
if(isset($_POST['submit'])) {
    $province = $_POST['province']; 
    $candidat = $_POST['candidat']; 

    $link = mysql_connect("localhost", "root", "")or die ('Erreur : '.mysql_error() );;
    mysql_select_db("election");

    $query = "SELECT DISTINCT * FROM resultat r, candidat c, province p, election e, prenom_cand t WHERE r.id_candidat = c.id_candidat AND t.id_prenom = c.id_prenom AND r.id_province = p.id_province  AND r.id_election = e.id_election AND e.id_election = 'PRES10'";

    $sql = "SET NAMES 'utf8'";
    mysql_query($sql);
    $result = mysql_query($query) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error()); 

    while($row = mysql_fetch_object($result)) 
    { 
        $score = $row->nbre_voix;
        $prenom = $row->pren1;
        $nom = $row->nom_candidat;
        $prov =  $row->province;
        $votes = $row->nbre_votants;
        $pourcent = ($score/$votes)*100;
        $nombre = number_format($pourcent, 2, ',', ' ');
        $nombre2 = number_format($pourcent, 0, ',', ' ');
        $id =  $row->id_province;
        $idc =  $row->id_candidat;              

        if ($province===$id && $candidat===$idc)
        {
            echo $prenom;
            echo " ";
            echo $nom;
            echo " a obtenu ";
            echo  $score; 
            echo " voix dans la province de ";
            echo $prov;
            echo ", soit une moyenne de ";
            echo $nombre;
            echo "%. <br/><br/>";   
            ?>

            <div style="width:<?php echo $nombre2 ?>%;background:#CCCCCC;height:40px;">
                <div style="padding:8px;">
                    <?php echo $nombre ?>%
                </div>
            </div>
    <?php
        }
    }
}

最后将可怜的 Ajax 放在 index.php 的头部标签之间，但它不起作用。

$(document).ready(function(){
$.ajax({
    url: "action.php",
    cache: false
  }).done(function( response ) {
    alert( response );
    $(".success").html(response); 
  });
});    

Answer 1

我看到的第一件事是

$(".success").html(response); 

应该是

$("#success").html(response); 

其次，您的 action.php 正在寻找 $_POST 变量，但您没有在 AJAX 调用中发送任何变量。由于if(isset($_POST['submit'])) 将跳过所有内容，您需要执行以下操作：

$('.submit').on('click', function(e) { 
    e.preventDefault(); // Prevents the form being submitted
    var province = $('#province').val(); // Don't forget to add the "province' id to your input 
    var candidate = $('#candidate').val(); // Don't forget to add "candidate' id to your input 
    $.ajax({
        url: "action.php",
        type: "POST",
        cache: false,
        data: {submit: 1, province: province, candidate: candidate},
        beforeSend: function(){
           alert('Sending');
        },
        error: function(){
           alert('Error !');
        }, 
        success: function(){
           alert('Success !');
        } 
      }).done(function( response ) {
        alert( response );
        $("#success").html(response); 
      });

    }); 
});

Answer 2

使用输入类型button 或者使用 submit 并防止其属性提交表单，重新加载，所以使用

$(document).ready(function(){
  $(".submit").click(function(e){
   e.preventDefault();
   $.ajax({
      url: "action.php",
      data:$("#form1").serialize()
   }).done(function( response ) {
       alert( response );
   $("#success").html(response); 
  });
 });    
});

在这里序列化表格，这样无论我是否正确填写了data部分中的数据等，您都可以消除头痛。