ajaxを利用しチェックボックスが押されたらViewを作り直したい

Question

前提・実現したいこと

PHP/Laravelを使用してインスタグラムのようなWEBアプリを作成しています。
表示する投稿をチェックボックス（タグなど）が押されるたびに、各チェックボックスが
選択されているかを判断して対象の投稿のみに更新したいと考えています。

チェックボックスがクリックされるとajaxが反応し、Laravel側Controllerのメソッドを
呼び出し、Viewを返すことを実現したいです。

ajaxとの通信は問題なくできていますが、画面の更新がされない状況です。
また、Chromeの検証にて確認したところ、
Network>Previewでの表示は想定通りとなっています。

どなたかご教授いただけると幸いです。

該当のソースコード

**home.blade.php**
<script>
	var check = function() {
		//チェックボックスの値を取得
		store = document.getElementById("tweets-topbar-under-store");
		parsonal = document.getElementById("tweets-topbar-under-parsonal");

		//typeId→表示するツイートを絞り込むための変数
		if (store.checked == true && parsonal.checked == true){
			typeId = 3;
		} else if(store.checked == true && parsonal.checked == false){
			typeId = 1;
		} else if(store.checked == false && parsonal.checked == true){
			typeId = 2;
		} else {
			typeId = 4;
		}

		$.ajax({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			url: "/type",
			type: "POST",
			data: {	typeId: typeId },
			async: false,
			
			}).done(function (results){
				//ここまでは問題ないが画面は変わらない
				alert('通信成功');
				
			}).fail(function(jqXHR,textStatus,errorThrown){
				alert('ファイルの取得に失敗しました。');
				console.log("ajax通信に失敗しました")
				console.log(jqXHR.status);
				console.log(textStatus);
				console.log(errorThrown.message);
			});
	}
</script>


**HomeController.php**
    //ajax用。VIEWの店舗・個人が変更されたら動く。チェックに対応する投稿のみを返す
    public function typeSelect(Request $request){;
        if($_POST["typeId"] == 1 || 2){
          //ここでチェックされている投稿のみを取得（最初はall()で全部表示している）
　　　　　　$tweets = Tweet::where('type', $_POST["typeId"])->get();
          return view('home', [
            'tweets' => $tweets,
          ]);
        }
        else if($_POST["typeId"]==3){
          $tweets = Tweet::all();
          return view('home', [
            'tweets' => $tweets,
          ]);
        }


**Web.php**
    Route::post('/type', 'HomeController@typeSelect');

Answer 1

results
受け取ってなにもしてないからです。
JavaScriptで適宜HTMLを書き換えてください。
ただ、返すのがhome.bladeではダメなのでは？
Ajaxの理解が薄いように思います。

でもこれ、Laravelですよね？
なぜ$_POST使ってるんですか？
if($_POST["typeId"] == 1 || 2){という記述ではtypeIdが2のときは比較しません。
諸々足りてない基礎が多いと思います。

Comments

[JsoHaya]

ご回答、ご指摘ありがとうございます。
Javascriptでは何も処理するつもりはなく、Controllerのメソッドを実行したいだけなのですが、
何か問題があるのでしょうか。

$_POSTの箇所については
$typeall = $request->all();
$typeId = $typeall['typeId'];
if($typeId == 1 || $typeId == 2){
に修正しました。ありがとうございます。

[m.ts10806]

Ajaxで実行されるサーバーサイドの処理は画面描画をしません。
「出力内容」を全て実行もとに返すだけです。
返ってきた「出力内容」は実行もとであるJavaScriptで処理する必要があります。
Laravelでなくてもなんでも、ajaxを使うということはそういうことです。
なので、通常はサーバーサイドから返すのは「変化させたい箇所のみのHTML」か「データだけ詰めたJSON」です。

[JsoHaya]

なるほど、Network>Preview では意図した出力になっているということは、
「出力内容」まではできていて、JavaScriptで処理ができていないということなんですね。
その出力結果であるviewをJavaScriptで表示させる処理方法は何かあるのでしょうか？
何度もすみませんがよろしくお願いします。

[m.ts10806]

要件次第です。
htmlをどこからどこまで作り直すか によって返す情報も変わります。
それによってJavaScriptでやることも変わります。
PureJavaScriptなら {要素}.innerHtml = {中に入れたい要素}
jQueryなら {要素}.html({中に入れたい要素})
で書き換えはできますが、まずは、
どこからどこまでどう書き換えるかを決めるところからですね。
決めの問題なので、考えるのは作る人です。

[JsoHaya]

ちなみにですが、
https://www.amazon.co.jp/gp/video/storefront/ref=topnav_storetab_aiv?node=2351649051
ここの「ホーム」「ストア」「チャンネル」・・・とタブがありますが、この場合だと
タブの中身ごとにHTMLが用意されてるのでしょうか。

そうでしたら、ajaxを使って画面を更新するべきか、それぞれ画面を作るべきか、
どちらが最善だと考えますか？すごく初歩的な質問だと思いますがよろしくお願いします。

[m.ts10806]

ベストプラクティスという概念は「適用できない」と思って良いです。
ひとつのゴールに到達するためのルートや手段はひとつではないからです。
同じようなゴールに見えてもあつかうデータや機能によっても変わってきますし、目指すゴールやどこまで考えるかにもよるでしょう。なにを主とするかにもよります。
パフォーマンスか？メンテナンス性か？今目の前の組みやすさか？
環境やフレームワーク、技量によってもとりうる手段は無限に近しいです。

[JsoHaya]

色々とご回答いただき本当にありがとうございました。
師匠と呼ばせてください。初めての質問に対する回答が師匠で本当によかったです。
これから色々な手段を学んでいきます
また質問することがあればよろしくお願いします。