Tampilan menghasilkan halaman yang sama menggunakan Flask API

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First Flask App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script></head><script>function myFunction() {
var text1= $('#text1').val();
var text2= $('#text2').val();
  $.ajax({
              url: "/join",
              type: "POST",
              data: {text1:text1,
              text2:text2}          }).done(function(response) {            var html= "<br><br><br><p> <b> RESULT : <b><p>";            response =response.result;
                 $.each(response,function(key,val){
                 console.log(val);
                    html+="<p>"+val+"<p>"                });
                html +="<br>";
                $(".show-data").append(html);
            });
};  </script>
<body>
    <p>
        Taking input from web<br><br>            Text_Value1<input type="text" id="text1" name="text1"><br><br>
            Text_Value2<input type="text" id="text2" name="text2"><br><br>
            <button id="clicked" onclick="myFunction()">Submit</button>
        </p>
    <div class="show-data" >    </div>
</body>
</html>
Colorful Caterpillar