Условный запрос из HTML-элементов управления

Question

Я хочу создать веб-страницу, где пользователь может выбирать данные из различных элементов управления HTML и формировать условный запрос. Например

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

Данные для a, b, c и x получены из элементов управления html, и пользователь также может удалять различные условия в запросе.

Позже я хочу преобразовать этот запрос в json / xml и отправить его на сервер.

Оцените ваши предложения по пользовательскому интерфейсу или живым примерам?

PS: я использую фреймворк django и планирую использовать jquery.

Answer 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>