Question

我正在使用jquery ajax来发布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的东西，留在jQuery世界。这将解决您的跨浏览器问题。

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>"
}

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

3 个答案: