Возвращаемое значение из 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);
            }
        });
    });
});

Скрипка здесь

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

Answer 2

Решения просты:

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

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

prep:

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);
});

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