Question

我的HTML代码非常简单：

<body>

<form id="delForm" action="deleteThirdMulti.php" method="post"> <!--Le fomulaire qui ne sert que pour les checkbox-->
<div class="container">
        <div class="col-md-1 pull-right">
            <a href="addThird.php"><img src="CSS/PICTURES/add.png" /></a>
            <br /><br />
        </div>
    <div class="row">
        <div class="col-md-2 form-group">
            <button type="submit" class="btn btn-default" name="delete_all">Supprimer</button>
        </div>
        <div class="col-md-2 form-group">
            <select name="choix_service" class="form-control form-update-user" id="sort">
                <option selected="selected">TOUS</option>
                <option value="COMPTABILITE">CLIENT</option>
                <option value="EXPLOITATION">AFFRETE</option>
                <option value="INFORMATIQUE">PROPRIETAIRE</option>
            </select>
        </div>
    </div>        
    <table class="table table-condensed table-responsive table-bordered sortable table-striped" id="table">
        <thead>
            <tr>
                <th class="text-center"><input type="checkbox" onclick="toggle(this)" name="check_all"/></th>
                <th class="text-center">Type</th>
                <th class="text-center">Code</th>
                <th class="text-center">Nom</th>
                <th class="text-center">Adresse 1</th>
                <th class="text-center">Adresse 2</th>
                <th class="text-center">Code Postal</th>
                <th class="text-center">Ville</th>
                <th class="text-center">Pays</th>
                <th class="text-center">Téléphone</th>
                <th class="text-center">Fax</th>
                <th class="text-center">E-mail</th>
                <th class="text-center">Site web</th>
            </tr>
        </thead>
        <tbody>

然后，我有一个显示数据库数据的PHP代码。

问题是我希望用户能够更改选择框中的值，并且我希望在没有页面重新加载的情况下更新数据。实际上，当我选择CLIENT时，只会在表格中显示基数的CLIENTS。

我开始使用Jquery代码：

<script type="text/javascript">
$(document).ready(function() {
  $('#sort').change(function(){
      var valeur = $('#sort option:selected').text();
      $.ajax({
        url: 'some-url',
        type: 'post',
        dataType: 'json',
        data: valeur,
        success: function(data) {
                   ... do something with the data...
                 }
    });
  })
});

</script>

Answer 1

在Ajax调用的Success函数内部，您需要遍历数据并使用jquery的

.html(text)

用于填写表格数据。

将表id="table"包装在div容器中可能更容易，因此您可以在AJAX的成功函数中编写整个表HTML。

我希望这可以解决你的问题，你有点不清楚你想要完成什么，但似乎这里有一些语言障碍我们可以希望克服。

如果您需要澄清事情，请告诉我们！

澄清评论＃1：

在页面上为您的ajax响应信息创建一个div。我们称之为“clients_table_container”

<div id="clients_table_container"></div>

调用ajax响应成功函数时，可以使用要显示的html代码填充此容器div的内容。例如：

success: function(data)
{
    //TODO: Turn JSON into html string content
    var my_html_string = data;

    //REPLACE THE CONTENT IN THE DIV WITH THIS DATA
    $('#clients_table_container').html(my_html_string);
}

您需要确保在<table>变量中包含my_html_string html，并根据<tr><td></td></tr>中的json响应填写data标记变量。由于我们无法看到它的内容，因此这部分你将有todo。

Answer 2

有效！

这是我在AJAX PHP文件中的代码：

<?php

include('../sqlConnexion.php');

include('../security.php');

if ($_POST['valeur'] == 'TOUS')
{
    $req = $bdd->query('SELECT * FROM tiers ORDER BY code');
    $response['i'] = $_POST['valeur'];
}
else
{
    $req = $bdd->prepare('SELECT * FROM tiers WHERE type = :type ORDER BY code');
    $req->execute(array(
    'type' => $_POST['valeur']
));
}

$response['table'] = '';

$i = 0;    
while ($third=$req->fetch())
{
    $response['table'] = $response['table'] . "<tr>
    <td align='center'><input type='checkbox' name='delete_$i' value='".$third['id']."'></td>
    <td align='center'>" . $third['type'] . "</td>
    <td align='center'>" . $third['code'] . "</td>
    <td align='center'>" . $third['nom'] . " </td>
    <td align='center'>" . $third['adresse1'] . " </td>
    <td align='center'>" . $third['adresse2'] . " </td>
    <td align='center'>" . $third['cp'] . " </td>
    <td align='center'>" . $third['ville'] . " </td>
    <td align='center'>" . $third['pays'] . " </td>
    <td align='center'>" . $third['telephone'] . " </td>
    <td align='center'>" . $third['fax'] . " </td>
    <td align='center'>" . $third['email'] . " </td>
    <td align='center'><a target='blank_' href='" . $third['website'] . "'>" . $third['website'] . " </td>
    <td align='center'><a href='updateThird.php?id=" . $third['id'] . "'><img src='CSS/PICTURES/modification.jpg' title='Modifier le tiers'/></a></td>
    </tr>";
    $i++;
}

$req->closeCursor();

echo json_encode($response);

这是我的JQuery代码，填充了＆＃39; tbody＆＃39; ：

$(document).ready(function() {
  $('#sort').change(function(){
      var valeur = $('#sort option:selected').text();
      //window.location.replace('thirdManagement.php?third=' + valeur);
      $.ajax({
        url: 'MODEL/ajaxSearchThirds.php',
        type: 'post',
        dataType: 'json',
        data: {'valeur': valeur},
        success: function(data) {
                   $('tbody').html(data.table);
                   $('#ivalue').val(data.i);
        }
      });
  })
});

希望它会对某人有所帮助。

使用ajax选择时，从表中的查询更新数据

2 个答案: