Authentication




Cancel OK
B!コメントする  2013-03-14 14:58:00 by old

いまさら非同期通信2 (POSTして結果を受け取って表示)

非同期通信なんですが前回はデータを取ってくるだけでしたが
今回はこちらからデータを投げて、その結果を取得して表示します。

ごちゃごちゃ言っててもしょうがないのでますはソース

<html>
<head>
<title>sample2</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></head>
<body>

<script>
$(function() {
$('form#bar').submit(function(){
var postword = $("#text").val();
$.post(
'segmentation
api.php',
{
'word': postword,
'variation': '6'
},
function(data){
$('#message').html(data);
}
);

});
});
</script>

<form id="bar" name="bar" onsubmit="return false;">
<input type="text" name="text" id="text">
<input type="submit" value="send">
</form>
<div id="message"></div>

</body></html>


簡単に解説すると、テキストに入力したものをpostしてその結果を受け取ってmessage部分に表示します。
実際に実行した結果はこんな感じになります。



ちなみに送信先に指定してあるsegmentation_api.phpというのは、img/blog/201303141458-0.jpg rel=lightbox>

ちなみに送信先に指定してあるsegmentation
api.phpというのは、で作成したものを外部から叩けるようにしたものです。
ですので送信先は先日紹介した
http://zeijaku.net/blog#blog201303131531のasynchrotext.phpでも構いません。

では簡単に、半年後の自分に説明するつもりでどのように処理されるか見ていきます。

1.テキストに入力されたものをsubmitする
2.JQueryがテキストに入力されたものを取得してそれをsegmentation
api.phpにPOSTする
3.segmentationapi.phpから返ってきた内容をmessageに表示する

JQueryがテキストに入力されたものを取得しているのが

var postword = $("#text").val();


それをPOSTして結果を受け取っているのが

        $.post(
'segmentationapi.php',
{
'word': post
word,
'variation': '6'
},
function(data){
$('#message').html(data);
}
);


上半分がPOSTの部分、下半分が結果受け取りの部分になります。
実に簡単にPOSTしてその結果を受け取ることができています。
JQueryがなければこの部分の自作で結構な手間がかかっていたことでしょう。

ちなみにsubmitしたら再読み込みが出ますが、そこは

onsubmit="return false;"


を書くことでかわしています。
前回と今回の非同期通信でたいていの事は非同期で出来る下地のようなものが出来たと思います。
もちろんこれだけだと大したことは出来ませんが、これを応用発展させていけば今風のものが作成できると思います。


JavaScript  

  • コメント
  • コメントはまだありません