0

jquery ajax を使用して mysql サーバーにデータを POST していますが、連絡先を追加すると、連絡先リストが正しく更新されません。（クエリはfirefoxでは機能しますが、google chromeでは機能しません）。

スクリプト (連絡先リストを取得) :

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

4

3 に答える 3

0

上記の関数には同じ 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 ライブラリも使用します。

于 2013-06-11T15:04:09.657 に答える
0

次のように取得するために 2 回目の呼び出しを行う必要がないように、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>"
}
于 2013-06-11T15:11:44.647 に答える