ホーム » jQuery » jQuery の使い方概要 » jQuery の基本動作確認

テキストボックスの文字の取得

     $('#b1').click(function(){
          alert( $('#t1').val() );
     });

OK ボタンを押すと、テキストボックスの内容が表示される。

テキストボックスの文字を DIV にテキストとして入れる

     $('#b2').click(function(){
          $('#div2').text( $('#t2').val() );
     });

OK ボタンを押すと、テキストボックスの内容が div に入る (テキスト)。

テキストボックスの文字を DIV に HTML として入れる

     $('#b3').click(function(){
          $('#div3').html( $('#t3').val() );
     });

OK ボタンを押すと、テキストボックスの内容が div に入る (HTML)。

DIV の CSS を変更

     $('#b4').click(function(){
          $('#div4').css( 'border', 'dotted 2px red' );
     });

OK ボタンを押すと、枠の色が変わる。

AJAX でデータ取得

     $('#b5').click(function(){
          $.ajax({
               url: "ajax-test.html",
               cache: false,
               success: function(t){
                    $('#div5').html(t);
               }
          });
     });

OK ボタンを押すと AJAX でデータを取得し表示する。

AJAX でデータの送信と取得

     $('#b6').click(function(){
          $.ajax({
               url: "echo.php",
               type: 'POST',
               cache: false,
               data: { 
                    param1: $('#t6a').val(),
                    param2: $('#t6b').val()
               },
               success: function(t){
               
                    var o = eval('(' + t + ')');
               
                    alert( t );
                    alert( o.Name + ' - ' + o.Team );

               }
          });
     });

パラメータをサーバーに送信する。返って来た文字を受け取って表示しています。

AJAX でデータの送信と取得 （２）

     $('#b7').click(function(){
          $.ajax({
               url: "echo.php",
               type: 'POST',
               dataType: "json",
               cache: false,
               data: { 
                    param1: $('#t7a').val(),
                    param2: $('#t7b').val()
               },
               success: function(o){
                              
                    alert( o );
                    alert( o.Name + ' - ' + o.Team );

               }
          });
     });

パラメータをサーバーに送信する。eval 後にオブジェクトを受け取るコードを書いてます。

ホーム » jQuery » jQuery の使い方概要 » jQuery の基本動作確認