スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQueryで外部phpファイル(変数)にデータ送信($.get )

今さらながらjQueryを使った非同期通信を勉強することになって、すぐに忘れそうなのでメモ程度にエントリーしてみます。ご参考になれば幸いです。
まず、ボタンを押すと外部ファイル(php)の変数にデータを送信して、その結果を返すというもの。 今回はjQueryのgetメソッドを使います。
$.get ('送信するファイル'),{変数名:送信するデータ},戻ってきたデータの処理)
今回具体的な使い方としてflickr APIを使ってデータ通信をしてみます。

flickr APIのサンプルはflickr APIについては公開APIを利用したサンプルサイトを作っていくよを使わせていただきました。

今回はこれを使ってボタンを押したらデータがphpファイルに送信されるようにします。
<form action="" >
  <input type="button" value="red" />
  <input type="button" value="green" />
</form>
送信先などは別に指定するのでシンプルです。valueの値が送信されるデータとなります。次にjavascriptです。まずはjQueryを読み込んでやります。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
今度は今回のメインの非同期通信をおこなうため設定をします。
<script>
  $(function() {
    $(':button').click(function() {
      $.get ('flickr.php',
        {name : $(this).val()},
        function (data) {
          $('#flickr_box').html(data);
      });
    });
  });
</script>

ボタンをクリックするとflickr.php変数namevalueの値が送信され、その結果がid=flickr_boxに返されるということになります。

次にデータを受け取る側のphpについてです。
if( isset( $_GET[ 'name' ] ) ){
$keyword  = $_GET[ 'name' ] ;
} 

以上簡単な説明でした。

この他にも色々なフォームを使った送信方法があるので面白そうなのでぼちぼち紹介していきます。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。