ページ遷移をせずにテキスト内の数字を足し算して計算結果を表示させます

htmlの部分

messages_test.php

<p>$.postで足し算の結果を表示させる</p>
<p>計算</p>
<input type="text" name="textname1" id="textname1" size="20">
<p>＋</p>
<input type="text" name="textname2" id="textname2" size="20" >
<button id="btn-a" type="button">計算</button>
//以下のコードに計算結果を表示させます
<p id="sum"></p>

・テキストを２つ用意させ、それぞれにidを付けます。
・buttonのtypeは今回非同期通信の為、submitではなくbuttonを使用。(submitだと画面遷移してしまう為）
<p id="sum"></p> のコードが計算結果を表示させるコードです。idを付けてあげると分かりやすいです。

jqueryの部分

messages_test.php

//$.postで足し算の結果を表示させる。
$(function sum(){
	$("#btn-a").click(function() {
		$.post("/messages/test1",{textname1:$("#textname1").val(),textname2:$("#textname2").val()},function(data){
			$("#sum").html(data);
		});
	});
});

・ jqueryのpostの基本文法は「$.post(送信先URL,{送信データ},function(data){　　
　　　　　　　　　　　　　//何らかの処理 });

・"/messages/test1" 　　が送信先URL。
　{textname1:$("#textname1").val(),textname2:$("#textname2").val()}が送信データとなります。
・$("#sum").html(data);　はhtml部分に記述した<p id="sum"></p> に計算結果を表示させる処理を行います。

controllerの部分

controllers/messages.php

function test1(){ 
  $textname1 = $this->input->post("textname1");
  $textname2 = $this->input->post("textname2");
  $data = $textname1 + $textname2;
  print $data;
}

・controllersには受け取った値を足し算して合計値を表示させる処理を行います。
・$this->input->post("textname1");、$this->input->post("textname2");にはテキストに入力した値が入っており、その値を変数に代入しております。
・変数に代入した値を足し算して変数($data)に入れ、printで表示させております。

画像

![スクリーンショット 2021-04-18 12.21.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339415/b530af9c-4409-aa9b-ece7-464e4af6932e.png)

・画像の通り、4+5と記述して、「計算」ボタンを押すと合計値の「９」が表示されます。

以上が基本的なjqueryの$.postで非同期通信を行う方法です。