AJAX запрос не отображается на той же странице

Question

Я хочу, чтобы пользователь ввел URL-адрес веб-сайта, и при нажатии на кнопку отправки я хочу, чтобы запрос ajax запускался и отображал ответ на той же странице в <div id="test"></div>, но когда я заполняю поле ввода и нажмите "Отправить" ничего не показывает. Но если я проверю консоль, я вижу, что запрашивается страница ajax.

Вот pagespeed.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<form method="post">
    <input type="text" id="website" name="website">
    <button id="button_1" value="val_1" name="but1">button 1</button>
</form>

<script>
$("button").click(function(e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "/lighthouse.php",
        data: { 
            email: $('#website').val() // < note use of 'this' here
        },
        success: function(result) {
            $('#test').html(data);
        },
        error: function(result) {
            alert('error');
        }
    });
});
</script>

<div id="test">

</div>

А вот lighthouse.php

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script>
$(document).ready(function() {
    // INTRODUCTION RIGHT
    $("#test").text("Let's get in touch");
});
</script>

Таким образом, функция jQuery не отображается на странице pagespeed.html, потому что <div id="test"></div> остается пустым.

Спасибо за ваше время!

Answer 1

Вам необходимо изменить

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

на

$ ('# test'). html (результат);

потому что