Question

我有一个从数据库填充的表。一旦用户更改了选择框选项，我将如何才能填充此表？我认为我需要我们的AJAX和onchange下拉，因为表的查询将在下拉选择中改变，但我不知道如何去做。我知道这不会太难，但我需要先了解一个例子才能理解并适用于其他地方。

使用php 5.2

我尝试过遵循W3示例，但似乎没有涵盖这一领域。更多加载现有文件以呈现文本。我不知道如何应用它。

<td style="vertical-align: top;">
   <select name="caseless_numbers" id="ValTwo" class="DropChange">
       <option value=""></option>
       <option value="1">A</option>
       <option value="2">B</option>
       <option value="3">C</option>
       <option value="4">D</option>
   </select>
</td>

Answer 1

我会这样做。

将表格包裹在名为tablewrap的div或其他内容中在下拉列表中添加更改事件。使用jQuery帖子，然后您可以将值作为名为selection的变量发送到php脚本来制作表格，然后将结果用作div的html：

$("#ValTwo").on("change", function() {
    $.post("getTableData.php", { selection: $(this).val()  },   function(data) {    
    $("#tablewrap").html(data.table);   
    }, "json");
});

Answer 2

您希望阅读XMLHttpRequest和how to use them。

网上有数十篇文章，详细讨论了如何做到这一点。

Answer 3

在不知道您使用什么作为服务器端语言的情况下，我无法举例说明。以下是使用ASP.NET MVC4服务器端的ajax帖子的示例。

<强> jQuery的：

$('#ValTwo').change(function(){
  $.ajax({
    type: "POST",
    url: "/{controller}/{action}/",
    data: { 'Selection' : $('#ValTwo').val() }, //PASSES BACK SELECT VALUE
    dataType: "json",
    success: function (data, text) {
      //APPEND TABLE HERE, 'data' WILL CONTAIN ANYTHING RETURNED
  });
});

注意：加载后添加到页面的任何输入/选择/ textarea控件（即：在成功方法中）将需要使用$.live添加任何事件监听器。

关于Ajax的jQuery文档： http://api.jquery.com/jQuery.ajax/

Answer 4

要建立自己的AJAX机制来做这件事还有很多事要做 - 作为学术练习。但是，如果您想要一个具有最大跨浏览器兼容性和强大功能集的强大解决方案，我建议您查看jQuery和datatables的组合。如果没有AJAX工作原理的安全基础，很多数据表的功能都会模糊不清，但我发现这种组合可以大大节省生产环境中的时间和精力。

使用此路线，您需要仔细查看Server Side Processing示例。请务必注意，您可以为此选项属性使用脚本URL或回调函数，并且可以强制数据表在更改事件中从服务器中新获取（请查看fnReloadAjax plugin ）。

在掌握这些工具方面存在一些混淆的空间，但它们非常强大，并且从长远来看会获得它们的保留。

AJAX在变化时创建表单/表

4 个答案: