페이지 전환 없이 텍스트의 숫자를 더하여 계산 결과를 표시합니다.

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>

・ 텍스트를 2개 준비시켜, 각각에 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로 표시시키고 있습니다.

이미지

・화상대로, 4+5라고 기술하고, 「계산」버튼을 누르면 합계치의 「9」가 표시됩니다.

이상이 기본 jquery $.post에서 비동기 통신을 수행하는 방법입니다.