ajax php のサンプルコードが動かない

###前提・実現したいこと
下記サイトのサンプルコードを期待通り動がしたい。
http://noumenon-th.net/programming/2016/03/29/php_ajax/

###発生している問題・エラーメッセージ
期待する出力↓
りんごとバナナを入力しました。
現在の出力↓
{$word1}と{$word2}を入力しました。

"; //echo json_encode(array("word1"=>$word1,"word2"=>$word2));//JSON形式で返す場合


###該当のソースコード
```php html javascript
<?php

$word1 = $_POST['word1'];
$word2 = $_POST['word2'];

echo "<p>{$word1}と{$word2}を入力しました。</p>";

//echo json_encode(array("word1"=>$word1,"word2"=>$word2));//JSON形式で返す場合

?>

<!DOCTYPE html>
<html>
<head>
<title>PHPとの間でAjax通信をおこなう</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    
<script type='text/javascript'>

$(document).ready(function(){
  
  $("#submit_bt").click(function(event){
    //フォームが通常の動きをしないように
    event.preventDefault();
    //初期化
    $("#ajax_result").empty();
    
    test();
  });
});

function test(){
  var word_val1=$("#word_id1").val(); 
  var word_val2=$("#word_id2").val(); 
  
  $.ajax({
    type: 'POST',
    url: './test.php',
    data:{
      word1:word_val1,
      word2:word_val2
    },
    dataType: 'html',
  })
  //$.post('./test.php', {word1:word_val1,word2:word_val2})
  .done(function(data, status, jqXHR){
    $("#ajax_result").html(data);
    //$("#ajax_result").html(data.word1 +"と"+ data.word2);//PHPからJSON形式で返ってくる場合
  })
  .fail(function(jqXHR, status, error){
     $("#ajax_result").html("エラーです");
  })
  .always(function(jqXHR, status){
    console.log(status);
  });

}

</script>

<head>
<body>

<form method="post">
  <input type="text" value="りんご" name="word1" id="word_id1" />
  <input type="text" value="バナナ" name="word2" id="word_id2" />
  <input type="submit" value="送信" id="submit_bt" />
</form>

<div id="ajax_result"></div>

</body>
</html>