ajax,apiで作ったHTMLに、tokenを追加して送信する方法を教えてください。

Question

前提・実現したいこと

プログラミング初学者です。お力貸していただけたら嬉しいです。

rails で ajax で get をしたあと、javascriptでHTMLを作り、データを送信したいです。
その際に、tokenがないというエラーが出ており困っております。
javascriptで作成したsubmitを押したときに、tokenを追加する方法はあるでしょうか？

（ちなみにこちらのデータはsession中のidと紐づけたいので、protect_from_forgery with: :null_sessionはできれば使いたくないです。マークアップ変なのはお許しください！）

発生している問題・エラーメッセージ

ActionController::InvalidAuthenticityToken

該当のソースコード

$(function(){
  function buildHTML(result){
    var html = `<div class="result-wrapper">
                  <form action="/shops" method="post">
                    店舗名: <input class="result-name" type="text" name="name" value="${result.name}" readonly><br>
                    住所: <input class="result-adress" type="text" name="address" value="${result.address}" readonly><br>
                    写真: <img src="${result.image_url.shop_image1}">
                    <input type="hidden" name="imageurl" value="${result.image_url.shop_image1}">
                    <input type="submit" value="登録する">
                  </form>
                </div>`
    return html;
  }

  $("#submit-button").on("click", function(){
    var input = $("#search-input").val();

    $.ajax({
      type: 'GET',
      url: 'https://api.gnavi.co.jp/RestSearchAPI/v3/?keyid=************************',
      data: {freeword: input},
      dataType: 'json',
    })
    .done(function(results){
      console.log(results);
      $(".container").empty();
      results.rest.forEach(function(result){
        var html = buildHTML(result);
        $(".container").append(html);
      })
    })
  })
});

試したこと

ヘッダーに

<%= csrf_meta_tags %>

は追加しております。

Answer 1

自己解決しました！

ヘッダーからtokenを取得して、HTMLに追加すればできるようになりました。

# headに書いた<%= csrf_meta_tags %>からtokenを取得する関数を書く
function getCSRFtoken(){
  return $("meta[name=csrf-token]").attr("content");
}

# buildするHTMLに関数を使って追加する
<input type="hidden" name="authenticity_token" value="${getCSRFtoken()}">