jqueryでAjaxを使い、PHPのJSON形式で送りたい

//sample.tpl
<header>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</header>
<div class="try_ajax">
  <h1>Ajaxお試し</h1>
  <p>IDを入力してください:<input type="text" id="main"><button id="send">送信</button></p>
  <div id="return"></div>
</div>
<script>
  $(function(){
    $('#send').on('click',function(event){
      var data_id= {ldelim}'id':$('#main').val(){rdelim};  
      // var data_id= {'id':$('#main').val()}と同意。
      alert(data_id.id);  // テイストボックスに打ち込んだ文字(japan1)が表示される。
      $.ajax({
        type: 'POST',
        url: url,
        data: data_id,
        dataType: 'json'
      }).done(function(data){
        alert(data);
        $('#return').append('<p>'+data.id+':'+data.school+':'+data.skill+'</p>');
      }).fail(function(XMLHttpRequest,status,e){
        alert(e);
      }).always(function(){
        alert('Finish Ajax.');
      })
    })
  })
</script>

// sample.php
$id= $_POST['id'];  // null を返す
$ajax_list= array('id'=> $id, 'school'=> 'japan', 'skill'=> 'programming');
echo json_encode($ajax_list);
// header('Content-type: application/json; charset=UTF-8');

Smartyのテンプレートで構成されているサイトに、初めてAjaxを使おうとし、試しの上記のコードを実行したら「SyntaxError: Unexpected token < in JSON at position 50」を吐きました。参考にしたサイトは,https://techacademy.jp/magazine/37062　。
になります。変数data_idはJSON形式であると思うのですが、どうしてこんなエラーを吐くかわかりません。あと、PHPの「header('Content-type: application/json; charset=UTF-8');」の部分を実行すると画面がhtmlのheaderのコード文字が表示され、UIが全く表示されなくなるのでなくなくコメントアウトしています。
試したことは、
・dataTypeを「'json'」から「'text'」に変更すると、done()部分が実行され、「alert(data)」の部分は「{"id":"japan1","school":"japan","skill":"programming"}<html>

<head><meta>...(以下略)」　になりました。また、「$('#return').append('<p>'+data.id+':'+data.school+':'+data.skill+'</p>');」のところは「undefined:undefined:undefined」と画面に表示されました。

・マニュアルにdataのTypeはPlainObject、String、Arrayとなっていたので、「var data_id= {ldelim}'id':$('#main').val(){rdelim}; 」を「var data_id=[ {ldelim}'id':$('#main').val(){rdelim}]; 」に変更しましたが、同じく「SyntaxError」を吐きました。
他の方の環境では問題なく動くのでしょうか？Smartyを使用しているのが参考サイト通りの挙動をしない原因なのでしょうか？助言をお願いします。

tabuu

2022/06/22 23:20

sample.phpはjsonをechoした後にhtmlを出力するようになっていませんか？もしくはphpのエラーで500エラー等のhtmlが自動で出力されていませんか？

hima-mura.

2022/06/23 04:43

大変申し訳なく意味を意図をかみ切れてないのですが、 echoでjsonをJSに送信した後にheader('Content-type: application/json; charset=UTF-8');を記述するとhtml部分のhead部分のコードが出力されるのですが、これって設定で出力を変えたりできるということですか？

tabuu

2022/06/23 05:20

echoしたあとにheader関数を使っているのでエラーになって500エラーのhtmlが自動で表示されているのかもしれません。 echoの前にheader関数を使ってみてください。(headerでContentTypeを変更しなくても問題ないとは思うのですが) ちなみにブラウザのurl欄にsample.phpのurlを入力するとどのように表示されますか？ GETとPOSTの違いはありますが何かヒントになるかも。