jqueryの$.postを使用して非同期通信を行う(フレームワーク:codeigniter)
ページ遷移をせずにテキスト内の数字を足し算して計算結果を表示させます
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>
<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);
});
});
});
//$.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;
}
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で非同期通信を行う方法です。
Author And Source
この問題について(jqueryの$.postを使用して非同期通信を行う(フレームワーク:codeigniter)), 我々は、より多くの情報をここで見つけました https://qiita.com/rokudaime_cook/items/3b04b589470edfac104f著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .