(JavaScript)jQueryでAJAX

(JavaScript)ページの一部を動的に置き換える(prototype.js) でprototypeを使ったAjax通信方法を書きました。

今回はjQueryを使った方法です。

AJAX(非同期通信)リクエストをPrototypeとjQueryで行う[AJAX][JS] | QUALL - blogに、PrototypeとjQueryでのAjax構文の比較がなされてました。

ほぼコピペですが、jQueryを使った場合,下記のような感じとなります。

●HTML、JavaScript側

<script type="text/javascript">

$(function(){

    $("#evnt").click(function(){

        //AJAXを使い、サーバにリクエス。レスポンスを表示。

        $.ajax({

            url : "/test.php", //リクエス先

            type : "post",     //GETかPOSTか

            data : ({ prm1: $("#paramtext1").val() , prm2: $("#paramtext2").val() }),   //パラメータ

            success : function(request){

                $("#rest").html(request);

            }

        });

    });

});

</script>

 

<input type="text" id="paramtext1">

<input type="text" id="paramtext2">

<input type="button" id="evnt" value="実行">

<div id="res"> </div>

●PHP側(test.php)

foreach ($_POST as $key => $value) {

    echo $key . "は" 0 $value . "です<br>";

}