Как сделать обработку запроса в php и через ajax отдавать обработанный ответ?

239

19 декабря 2016, 19:29

Собственно есть форма

<form id="formx">
        <legend>Test From</legend>
        <label for="name">Название:</label>
        <input id="name" name="data" value="" type="text">
        <input value="Send" type="submit">
    </form>

скрипт который обрабатывает форму

<script type="text/javascript" language="javascript">
        $('form#formx').on('submit', function(e) {
          e.preventDefault();
          var msg   = $(this).serialize();
            $.ajax({
              type: 'POST',
              url: 'res.php',
              data: msg,
              success: function(data) {
                //в data должен быть ответ сервера в формате JSON
                var response = JSON.parse(data); //массив в котором ваши данные
                var html='<ul>';
                for(var i in response)html+='<li>'+response[i].russian+'</li>';
                html+='</ul>';
                $('#results').html(html);
                  // i - номер объекта, {key} - ваш ключ из массива
              },
              error:  function(xhr, str){
                    alert('Возникла ошибка: ' + xhr.responseCode);
                }
            });
      });
    </script>

результат после ajax выводится сюда

<div id="results">Вывод</div>

Сам обработчик файл res.php

$array = array();
$ch = curl_init();
$url = 'http://shikimori.org/api/animes/search?q='.$_POST['data'];
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HEADER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_USERAGENT, "User Agent");
if ($content = curl_exec($ch)) {
$array = json_decode($content, true);
}
curl_close($ch);
print($content);

что надо прописать в javascript выше

<div id="results">Вывод</div>

чтобы в данный div id вывести ответ, который я хочу прописать в res.php например:

вместо print($content);

прописать

foreach($array as $row) {
  $name = $row["name"];
  $russian = $row["russian"];
  echo "$name // $russian<br>";
}

Answer 1

Не совсем понятно в чем проблема.

Если есть необходимость формировать результата на стороне сервера, то не нужно парсить JSON на клиенте. И тогда функция success сводится к одной строке:

 $('#results').html(data);

Т.е., что пришло из PHP скрипта, то и вывели в блок.

Либо как вариант можно поменять форматирование на строне клиента. Т.е. будет что-то навроде

html+=response[i].name + ' // ' + response[i].russian + '<br />';

И убрать использование ul - если список в выводе не нужен.

Answer 2

У вас как минимум 2 не стыковки:

Вы на сервере возвращаете HTML, а не JSON;
На клиенте зачем то парсите JSON, хотя сервер уже HTML возвращает.

Варианта 2:

Либо на сервере генерируйте JSON с помощью json_encode().
Либо на стороне клиента просто вставляете через $('#result').html()

PS:

Что бы не было такого костыля:

//в data должен быть ответ сервера в формате JSON

var response = JSON.parse(data); //массив в котором ваши данные

Надо в $.ajax() передавать в объект настроек нужный тип(dataType) ожидаемого контента от сервера:

        $.ajax({
          type: 'POST',
          url: 'res.php',
          dataType: 'json'
          data: msg,
          success: function(data) {}, // data уже js объект
          error:  function(xhr, str){}
        });