學習筆記專區

<script src="js/jquery-1.12.3.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

    <script>

       $(function() {

           $('#buttonLoad').click(function() {

              //練習一使用load()載入jQueryEffects.html網頁中的img1圖片

              //load()用於靜態網頁

              $("#show").load("jQueryEffects.html #img1")

           });

           $('#buttonGet').click(function() {

              //練習二使用get()

              //1. 呼叫Parameter.jsp

              //2. 傳 name=Jack及age=30的資料給Parameter.jsp

              //3. 將Server端回傳的結果加上h2的標籤,顯示在show的div中

           $.get("Parameter.jsp",{"name":'Jack',"age":20},

                  function(data){

              $("#show").html("<h2>"+data+"</h2>")

           })

           });

           $('#buttonPost').click(function() {

              //練習三使用post()

              //1. 呼叫Parameter.jsp

              //2. 傳 name=Mary及age=的25資料給Parameter.jsp

              //3. 將Server端回傳的結果加上h2的標籤,顯示在show的div中

              //4. 跟get完全一樣，不一樣的地方JQ幫你做好了

              $.post("Parameter.jsp",{name:'Mary',age:22},

                  function(data){

              $("#show").html("<h2>"+data+"</h2>")

           })

//            換成ajax的寫法：

              $.ajax({

                  url: "Parameter.jsp",

                  type:"get",

                  data:{name:'Mary',age:22},

                  success:function(data){$("#show").html("<h2>"+data+"</h2>")}

              });

           });

           $('#select1').change(function() {

              //練習四使用getJSON()

              //1. 呼叫Products?categoryID=2

              //2. 將Server端回傳的結果顯示在id為productTable的table中

           });

           $('#buttonAjax').click(function() {

              //練習五使用ajax()

              //清除select1中的option

              //1. 呼叫XMLServlet

              //2. 將回傳的XML資料加到select的標籤中

           });

           //練習六 顯示server端的程式正在執行

           $('#img1').hide();

       });

    </script>