Возвращаемое значение с PHP через JSON/Ajax

Question

Я работаю над PHP CMS в настоящий момент и попал между камнем и твердым местом, это те, кто является CSS и AJAX. Проблема, которую я пытаюсь выяснить, заключается в том, как заставить AJAX/JSON и PHP возвращать значения, которые могут быть заполнены в форму.

На одной из моих страниц у меня есть форма с избранным списком. Когда пользователь выбирает опцию из списка, сценарий AJAX запрашивает ответ из файла PHP, который выводит результаты обратно в браузер. Это работает нормально.

Однако JQuery/CSS не имеет особых элементов, таких как флажки в возвращаемых результатах.

Вместо этого я хотел бы представить пользователю форму с меню выбора в верхней и пустой полях ввода внизу. Когда они выбирают опцию из меню, поля формы внизу заполняются возвращаемыми данными. Сама форма состоит из текстовых полей, текстовых областей и списков выбора, и я хотел бы, чтобы каждый из них обновлял их значения в соответствии с соответствующими возвращаемыми данными.

Во-первых ... это возможно?

Во-вторых ... если это возможно, вы можете указать мне в правильном направлении относительно программатического потока или пример сценария, который я могу изучить.

Заранее спасибо.

Answer 1

Да, возможно и не очень сложно реализовать. Допустим, что ваш HTML выглядит примерно так (это, очевидно, некрасиво;)):

<select id="update"> 
    <option value="0">0</option> 
    <option value="1">1</option> 
    <option value="2">2</option>  
</select> 
<form action="#" method="POST"> 
    <label for="txt">Text:</label><input type="text" id="txt"/><br/> 
    <label for="sel">Select:</label><select id="sel"></select><br/> 
    <label for="txta">TextArea:</label><textarea id="txta"></textarea><br/> 
</form> 

Вы могли бы написать на запрос Ajax быстрый JQuery, заполняющий данные формы на success ответ что-то вроде этого:

$(document).ready(function(){ 
    $('#update').change(function(){ 
     $.ajax({ 
      url: '/echo/json/', 
      dataType: 'json', 
      type: 'POST', 
      data: { 
       'json': $('#update').val() 
        }, 
      success: function(data){ 
       $('#txt').val(data); 
       $('#sel option').remove(); 
       $('#sel').append($('<option></option>').attr('value', data).text(data)); 
       $('#txta').val(data); 
      } 
     }); 
    }); 
}); 

Fiddle here

Примечания, что ваш сценарий будет зависеть от элемента, который вы толкающие данных в (например, т он отличается между входным текстом, textarea и select в образце).

Answer 2

решение просто:

1. магазин все OnLoad/domready функциональности в новой функции (pimpHTML или что-то).
2. запустить его OnLoad/ondomready> флажки и т.д. стиле
3. запустить его после каждого изменения DOM (полуавтоматический)

.3. не так сложно. Просто создайте функцию setHtml(obj, html) (или что-то), что вставляет HTML ответ в узел, а затем переделывает pimpHTML

приготовительный:

function pimpHTML() { 
    // checkboxes 
    // radiobuttons 
    // ajax links 
    // etc 
} 
$(pimpHTML); // or $(documemt).ready(pimpHTML); 
function setHtml(obj, html) { 
    obj.html(html); 
    pimpHTML(); 
} 

полу-рядный:

var obj = ...; // form or messagebox or something 
$.post('/', function(rsp) { 
    setHtml(obj, rsp); 
}); 

Очевидно, что это не сделано, как это, и вам придется улучшить и указать его самостоятельно.