フロントエンドとバックエンドの連携について

###前提・実現したいこと
現在、Canvasを利用して画像の合成や編集をしたりするWebアプリを作ろうとしています。
そこで同じくCanvasを利用して画像の合成などを行っている（と思う）下記URLのサイトを参考にしています。
NIKEiD

参考にしているサイトはシューズの様々なパーツを好きな色・柄にカスタマイズできるというものです。
Webページに表示されているボタンをクリックして各パーツの色・柄を変更して画像を表示しているため、
そういった箇所はJavaScriptで実装していると思います。そして、様々な変更を行った後のシューズをカートに入れて注文する際、
当然ながらどのような色・柄に変更したのか、サイズは何センチなのかなどといった情報も必要になると思います。

そこで思ったのですが、
このようなJavaScriptで制御したと思われる箇所での（全く違っていたらすみません…）、注文に必要なデータ（色や柄など）は、
どのようにしてオーダー情報としてサーバー（？）に投げているのでしょうか？
JavaScriptの変数をPHPなどのサーバサイドのコードに渡してそこからオーダー情報として投げている、というようなことを行っているのでしょうか？
このような、フロントエンドとバックエンドとが密接な関係にある（と思う）ようなWebアプリの場合、どのようにしてJavaScriptとバックエンドとを連携させているのか、今一つピンとこないため質問させていただきました。
分かりにくい質問化とは思いますが、何かご回答を頂けると助かります_(..)

行動規範の内容に同意します

回答1件

ベストアンサー

質問者様がおっしゃっている感じで間違えないです。

基本的にhtmlの情報を使ってバックエンドに情報を伝えて上げる方法としてformで送る方法があります。
それのjavascriptバージョンはajaxという方法を使用してバックエンドに情報を伝えてあげます。

なので今回の場合でいうと、canvas内で色々いじった後に出来た情報を元にajaxを通じてデータをバックエンドに伝えます。

jqueryを使った例で言うと

var datas = {
  size: 26.5,
  logoColor: '#000',
  color: '#f0f'
}

$.ajax({
  url: '/post/url',
  type: 'post',
  data: datas,
  success: function(res){
    console.log('成功！')
  },
  error: function(error){
    console.log('失敗！')
  }
})