在添加联系人后加载我的联系人列表

Question

我正在使用jquery ajax POST数据在mysql服务器中，但是当我添加联系人时，联系人列表不会自行更新。 （查询工作在Firefox上，但不在谷歌浏览器上）。

脚本（获取联系人列表）：

<script> 
function load_contact() 
{ 
    var xmlhttp; 
    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      document.getElementById("contact_list").innerHTML=xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("GET","modif/get_contact.php",true); 
    xmlhttp.send(); 
} 
</script> 

脚本（添加联系人）：

<script type="text/javascript"> 

$(document).ready(function() { 
$('#form_contact').on('submit', function() { 

    var nom_contact = $('#nom_contact').val(); 
    var prenom_contact = $('#prenom_contact').val(); 

    if(nom_contact == '' || prenom_contact == '') { 
     alert('Les champs doivent êtres remplis'); 
    } else { 
     $.ajax({ 
      url: $(this).attr('action'), 
      type: $(this).attr('method'), 
      data: $(this).serialize(), 
      dataType: 'json', 
      success: function(json) { 
       if(json.reponse == 'ok') { 
        alert('Tout est bon'); 
       } else { 
        alert(''+ json.reponse); 

       } 
      } 
     }); 
    } 
    return false; 
}); 
}); 
</script> 

PHP：

<form class="form-horizontal" id="form_contact" method="post" action="modif/add_contact.php" > 
     <label for="Nom">Nom</label> 
     <input type="hidden" name="id_user" value="<?php echo $_GET['modifier'] ?>"> 
     <input class="span5" type="text" name="nom_contact"> 

     <label for="Prenom">Prenom</label> 
     <input class="span5" type="text" name="prenom_contact"> 

     <label for="tel">Telephone</label> 
     <input class="span5" type="text" name="telephone_contact"> 

     <label for="desc">Description courte (qui est-ce?)</label> 
     <input class="span5" type="text" name="description_contact"> 

     <input type="submit" name="contact" class="btn btn-primary pull-right" value="Valider" onclick="load_contact()"/> 


</form> 

<div id="contact_list"> 
     <table class="table table-striped"> 
     <thead> 
     <tr> 
      <th>Nom</th> 
      <th>Prénom</th> 
      <th>Description</th> 
      <th>Télephone</th> 

     </tr> 
     </thead> 
    <tbody> 

    <?php 
    $result = mysql_query("SELECT * FROM Contact WHERE id_user = ".$_GET['modifier'].""); 

    while ($row = mysql_fetch_array($result, MYSQL_BOTH)) { 
     printf (" 
       <tr> 
        <td>".$row["nom_contact"]."</td> 
        <td>".$row["prenom_contact"]."</td> 
        <td>".$row["description_contact"]."</td> 
        <td>".$row["telephone_contact"]."</td> 
        <td><a href='utilisateur.php?modifier=".$_GET['modifier']."&supprimer_contact=".$row[0]."' onclick='return(confirm(\"Etes-vous sûr de vouloir supprimer cette entrée?\"));'>Supprimer</a></td> 


       </tr> 
       "); 
    } 

    mysql_free_result($result); 
    ?> 

     </tbody> 

    </table> 

Answer 1

我建议不要使用XMLhttpReq东西，留在j查询世界。这将解决您的跨浏览器问题。

Answer 2

对上述函数使用相同的jquery ajax。

而不是这个。

<script> 
function load_contact() 
{ 
var xmlhttp; 
if (window.XMLHttpRequest) 
{// code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp=new XMLHttpRequest(); 
} 
else 
{// code for IE6, IE5 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
xmlhttp.onreadystatechange=function() 
{ 
if (xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 
document.getElementById("contact_list").innerHTML=xmlhttp.responseText; 
} 
} 
xmlhttp.open("GET","modif/get_contact.php",true); 
xmlhttp.send(); 
} 
</script> 

使用此

<script> 
    function load_contact() 
    { 


    $.ajax({ 
      url: 'modif/get_contact.php', 
      type: 'GET', 
      success: function() { 

      } 
     });  

    } 
    </script> 

，还可以使用最新的jQuery库。

Answer 3

你应该有你的Ajax提交页面返回的HTML添加到您的表，所以你不必拨打第二个电话来获得这样的：

<script type="text/javascript"> 
    (function($) { 
     $('#form_contact').on('submit', function() { 
      var _this = this; 
      var nom_contact = $('#nom_contact').val(); 
      var prenom_contact = $('#prenom_contact').val(); 

      if (nom_contact == '' || prenom_contact == '') { 
       alert('Les champs doivent êtres remplis'); 
      } else { 
       $.ajax({ 
        url: $(this).attr('action'), 
        type: $(this).attr('method'), 
        data: $(this).serialize(), 
        dataType: 'json', 
        success: function(json) { 
         if (json.reponse == 'ok') { 
          alert('Tout est bon'); 

          $(_this).find('tbody').append(json.row); 
         } else { 
          alert(''+ json.reponse); 
         } 
        } 
       }); 
      } 

      return false; 
     }); 
    })(jQuery); 
</script> 

所以你的Ajax将返回：

{ 
    "response" : "ok", 
    "row" : "<tr><td>Foo</td><td>Bar</td><td>Desc</td><td>1-123-123-1234</td><td><a href='utilisateur.php?modifier=123&supprimer_contact=123' onclick='return(confirm(\"Etes-vous sûr de vouloir supprimer cette entrée?\"));'>Supprimer</a></td></tr>" 
}