来自 html 控件的条件查询答案

【问题标题】：Conditional query from html controls来自 html 控件的条件查询
【发布时间】：2010-01-06 21:58:16
【问题描述】：

我想构建一个网页，用户可以在其中从不同的 html 控件中选择数据并形成条件查询。比如

a == 2 
and 
b == 4 
and 
c == 6 
or 
x == 0

a、b、c、x的数据来自html控件，用户也可以在查询中删除不同的条件。

稍后我想把这个查询转换成json/xml并发送到服务器。

感谢您对 ui 框架或实时示例的建议？

PS：我正在使用django框架并计划使用jquery。

【问题讨论】：

标签： jquery html django

【解决方案1】：

你可以编写一些简单的 jQuery 来构建一个表单，然后你可以使用类似 serializeArray 的东西将它发送到服务器：

http://docs.jquery.com/Ajax/serializeArray

类似以下的内容应该可以很好地帮助您构建：

<form class="search-form" action="search.php" method="get">
  <div class="search-conditions"></div>
  <div>
    <input class="add-button" type="button" value="Add condition" />
    <input class="submit-button" type="submit" value="Search" />
  </div>
</form>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
  $('.add-button').click(function() {
    var selectField = $('<select name="field-boolean[]"><option value="and">AND</option><option value="or">OR</option></select>');
    $('<div class="condition"></div>')
      .append(selectField)
      .append('<input name="field-name[]" type="text" />')
      .append(' = ')
      .append('<input name="field-value[]" type="text" />')
      .appendTo('.search-conditions');
  });

  $('form').submit(function() {
    console.log($('.search-form').serializeArray('.search-form'));
    return false;
  });
});
//]]>
</script>

【讨论】：