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

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)

函数来填充表格数据。

将 table 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);
}

您需要确保my_html_string变量中有<table> html，并根据data变量中的 json 响应填充<tr><td></td></tr>标签。 这部分你将不得不做，因为我们无法看到它的内容。

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

这是我填充 'tbody' 的 JQuery 代码：

$(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 个解决方案

解决方案1
1 已采纳 2017-01-26 14:52:35

解决方案2
0 2017-01-27 08:36:46

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-01-26 14:52:35

解决方案2 0 2017-01-27 08:36:46

解决方案1
1 已采纳 2017-01-26 14:52:35

解决方案2
0 2017-01-27 08:36:46