выполнить js в ajax ответе

Question

Хочу на ajax ответ повесть дополнительный js обработчик.

Пример реализации: есть три скрипта php: one.php в нем я получаю ответ от two.php, в ответе от two.php я хочу выполнить такой-же запрос, только получить ответ от three.php Вот как я пытался реализовать: one.php

<script src="./static/jquery-3.6.0.js"></script>
<?php
echo "<input type='submit' value='Результат' id='result' href='#'>";
echo"<script>
var a = 'VAR_A';
var b = 'VAR_B';
document.getElementById('result').onclick = function(){
  $.ajax({
    url: './two.php',
    type: 'POST',
    data:  {a:a,
            b:b
    },
    success: function(resp){
      document.getElementById('response').innerHTML = resp;
    }
  });
};
</script>
<div id='response'></div>";
?>

Успешно получаю ответ от two.php При клике на кнопку из ответа от two.php ожидаю получить ответ от three.php, но не получаю. two.php

<script src="./static/jquery-3.6.0.js"></script>
<?php
$resp1 = $_POST['a'];
$resp2 = $_POST['b'];
echo"<h1> " . $resp1 . " " . $resp2 . " </h1>";
<input type='submit' value='Результат' id='result2' href='#'>";
echo"<script>
var a = 'VAR_C';
var b = 'VAR_D';
document.getElementById('result2').onclick = function(){
  $.ajax({
    url: './three.php',
    type: 'POST',
    data:  {c:c,
            d:d
    },
    success: function(resp2){
      document.getElementById('response2').innerHTML = resp2;
    }
  });
};
</script>
<div id='response2'></div>";
?>

three.php

<?php
$resp3 = $_POST['c'];
$resp4 = $_POST['d'];
echo"<h1> " . $resp3 . " " . $resp4 . " </h1>";
?>

Answer 1

Нажав на кнопку в первом файле Вы получаете ответ сервака в виде HTML + JS - кода, который помещается в пустой перед этим div. А в JS - коде находится обработчик клика по кнопке с id = result2. Но без обновления страницы этот JS-код не запустишь на выполнение, т. е., браузер его воспринимает просто как текст. Поэтому кнопка result2 так и остаётся без обработчика клика. Так что нет ничего удивительного.

Задумка вовсе не провальная. В этом случае лучше всего в первом файле прописать HTML-код всех кнопок и поля для вывода результатов, но кнопку результат2 изначально сделать скрытой.

Для получения таблицы из другого файла в него не обязательно что-то отправлять, если он не предназначен для обработки принимаемой информации. Он (и первый файл тоже) может быть с расширением html:

one.html:

<style>
td{
    width: 100px;
    text-align: center;
}
</style>
<input type='submit' value='Результат' id='result' href='#'><br /><br />
<div id='response'></div><br />
<input type='submit' value='Результат2' id='result2' href='#' hidden>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
document.getElementById('result').onclick = function(){
    $.ajax({
    url: './two.html',
        type: 'POST',
        success: function(resp){
            document.getElementById('response').innerHTML = resp;
            document.getElementById('result2').hidden = false;
        }
    })
}
document.getElementById('result2').onclick = function(){
    var allTdOfTable = mytable.querySelectorAll("td");
    var c = allTdOfTable[0].innerText;
    var d = allTdOfTable[2].innerText;
    $.ajax({
        url: './three.php',
        type: 'POST',
        data:  {c:c,
                d:d
        },
        success: function(resp2){
            var myresult = resp2.split(" ");
            allTdOfTable[1].innerText = myresult[0];
            allTdOfTable[3].innerText = myresult[1];
        }
    });
};
</script>

two.html:

<table id=mytable border=1>
<tr><td>VAR_A</td><td></td></tr>
<tr><td>VAR_B</td><td></td></tr>
</table>

three.php:

<?php
$resp3 = $_POST['c'];
$resp4 = $_POST['d'];
echo "$resp3 $resp4";
?>

Answer 2

В комменты код вставлять некамильфо, поэтому пишу как ответ. В echo вот такой код поймёт точку как сращение строки

echo"<script>
url: './three.php',

и в итоге получится

url: '/threephp',

Для вывода HTML кода в PHP используйте вот такую конструкцию:

$string = <<<EOD

// тут HTML код, например:
<html>
</html>

EOD;
echo $string;

БЛОГ НА HUSL

выполнить js в ajax ответе

Ответы (2 шт):