AJAX在更改时创建表单/表

AJAX create form/table on change

本文关键字：表单 创建 AJAX      更新时间：2023-09-26

我有一个从数据库填充的表。一旦用户更改了selectbox选项，我将如何只填充此表？我想我需要AJAX和对下拉列表的onchange，因为在下拉列表选择之前，表的查询会发生变化，尽管我不知道该怎么做。我知道这不会太难，但我需要看到一个例子，然后才能理解它并应用到其他地方。

使用php5.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>

以下是我的操作方法。

将表包装在一个名为tablewrap或其他的div中，然后将更改事件添加到下拉列表中。使用jQuery post，您可以将值作为一个名为selection的变量发送到php脚本以生成表，然后将结果用作div的html：

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

您想了解XMLHttpRequest以及如何使用它们。

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

如果不知道您正在使用什么作为服务器端语言，我就不能给您举一个例子。下面是一个使用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
  });
});

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

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

对于构建自己的AJAX机制来实现这一点，有很多话要说——作为一种学术练习。然而，如果您想要一个具有最大跨浏览器兼容性和强大功能集的强大解决方案，我建议您考虑jQuery和数据表的组合。如果没有AJAX工作方式的安全基础，许多数据表的功能将是模糊的，但我发现这种组合在生产环境中可以极大地节省时间和精力。

使用此路由，您需要仔细查看服务器端处理示例。需要注意的是，您可以为此选项属性使用脚本URL或回调函数，并且您可以在更改事件中强制从服务器中新提取数据表（查看fnReloadAjax插件）。

掌握这些工具有一些混乱的空间，但它们非常强大，从长远来看会赢得一席之地。

相关文章：