Как ajax передать данные, подставить в url и вернуть результат назад?

Question

[Максим Киктев]

Есть index.php
в нем следующий код:

<form method="POST" id="formx" action="javascript:void(null);" onsubmit="call()">
    <legend>Test From</legend>
    <label for="name">Название:</label><input id="name" name="" value="" type="text">
    <input value="Send" type="submit">
    </form>
    <script type="text/javascript" language="javascript">
        function call() {
          var msg   = $('#formx').serialize();
            $.ajax({
              type: 'POST',
              url: 'res.php',
              data: msg,
              success: function(data) {
                $('.results').html(data);
              },
              error:  function(xhr, str){
                    alert('Возникла ошибка: ' + xhr.responseCode);
                }
            });

        }
    </script>
    <br><br>

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

Файл res.php который принимает переменную $_POST с данными

<?php
$array = array();

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://shikimori.org/api/animes/search?q=');
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_r($_POST);
?>

Как передать $_POST в строку curl_setopt($ch, CURLOPT_URL, 'shikimori.org/api/animes/search?q=');
после ../search?q=!!СЮДА!! и вывести полученный массив в index.php в div id="results"

Answer 1

[Dave]

Поле "name" не должно содержать пустого имени. Для начала, задай имя, например - "query"

<input name="name" name="query" value="" type="text" />

Теперь прими введенное значение:

curl_setopt($ch, CURLOPT_URL, 'http://shikimori.org/api/animes/search?q=' . $_POST['query']);

И все! Не нужно слать массивы, т.к у тебя одно поле всего.

Comments

[Максим Киктев]

массив приходит в ответ

Answer 2

[Максим Киктев]

В index.php

<form method="POST" 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); //массив в котором ваши данные
                $('#results').html(response); // {key} - ваш ключ из массива
              },
              error:  function(xhr, str){
                    alert('Возникла ошибка: ' + xhr.responseCode);
                }
            });
      });
    </script>
      <br><br>

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

Выдает ошибку XHR failed loading: POST