生活記事簿: Ajax

2016年12月12日星期一

JQuery Ajax傳遞陣列時參數名不要帶中括弧的方法

JQuery的Ajax如果使用POST的話，似乎在1.4+版本後都會把陣列的參數名加上中括弧，例如以下：

$.ajax({
 method: "POST",
 url: "/xxx.do",
 data: {
    arrayParameter : ['1','2','3','4','5']         
 }
});

預設arrayParameter會以arrayParameter[]的參數名，值為1,2,3,4,5的方式傳進url指定的後台，例如果用Servlet去接的話就要用
String[] arrayParameter = request.getParameterValues("arrayParameter[]");
才能接到。
為了能夠讓JQuery傳的陣列參數不要帶上中括弧，必須指定ajax的traditional為true，例如：

$.ajax({
 traditional: true,
 method: "POST",
 url: "/xxx.do",
 data: {
    arrayParameter : ['1','2','3','4','5']         
 }
});

或是設定全局設定，讓每個ajax都能使用traditional的參數傳遞方式：

$.ajaxSetup({traditional: true});

參考資料：

How do I remove the square brackets at the end of a JS variable name during AJAX calls?

2015年6月27日星期六

Ajax、JQuery與Servlet的簡單範例

在這邊要紀錄的是一個簡單的Ajax、JQuery、Servlet聯合應用的簡單範例。
此例client端利用JQuery的Ajax語法來將表單中的參數傳給以Servlet實作的Server端，經由Server端處理過後，以JSON的格式回傳給client端， client端再將JSON格式的回傳值解析後做相應的動作，此例的動作為兩個：跳出視窗顯示回傳值、在html裡的filedset中顯示回傳值。

首先是作為client端的html內容，index.html:

<!DOCTYPE html>

<html>

    <head>

        <title>AjaxTest</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- 加載Ajax -->

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

        <!-- Ajax的測試Script -->

         <script>

             //在網頁加載後，對id=doAjaxBtn的Button設定click的function

            $(document).ready(function(){

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

                   $.ajax({

                        type:"POST",                    //指定http參數傳輸格式為POST

                        url: "doAjaxServlet.do",        //請求目標的url，可在url內加上GET參數，如 www.xxxx.com?xx=yy&xxx=yyy

                        data: $("#formId").serialize(), //要傳給目標的data為id=formId的Form其序列化(serialize)為的值，之

                                                        //內含有name的物件value

                        dataType: "json",               //目標url處理完後回傳的值之type，此列為一個JSON Object

                        //Ajax成功後執行的function，response為回傳的值

                        //此範列回傳的JSON Object的內容格式如右所示: {userName:XXX,uswerInterest:[y1,y2,y3,...]}

                        success : function(response){

                            //在id=ajaxResponse的fieldset中顯示Ajax的回傳值

                            $("#ajaxResponse").html("您的大名:"+response.userName+"</br>");

                            $("#ajaxResponse").append("您的興趣:</br>");

                            var userInterestString = "";

                            for(var i = 0 ; i<response.userInterest.length ; i++){

                                $("#ajaxResponse").append(response.userInterest[i]+"</br>");

                                userInterestString += "\n"+response.userInterest[i];

                            }

                            //用彈出視窗顯示Ajax的回傳值

                            alert("UserName:"+response.userName+"\nInterest: "+userInterestString);

                        },

                        //Ajax失敗後要執行的function，此例為印出錯誤訊息

                        error:function(xhr, ajaxOptions, thrownError){

                            alert(xhr.status+"\n"+thrownError);
                        }

                    });

               });

            });  

        </script>

    </head>

    <body>

        <div>AjaxTest</div>

        <form id="formId">

            大名:<input type="text" name="userName">

            <input type="checkbox" name="userInterest" value="看書" />看書

            <input type="checkbox" name="userInterest" value="遊戲" />遊戲

            <input type="checkbox" name="userInterest" value="電影" />電影

            <input type="button" id="doAjaxBtn" value="啟動Ajax" />           

        </form>

        <div id="anotherSection">

            <!-- 用來顯示Ajax回傳值的fieldset -->

         <fieldset>

             <legend>Response from jQuery Ajax Request</legend>

             <div id="ajaxResponse"></div>

         </fieldset>

        </div> 

    </body>  

</html>

再來是Server端的Servlet，doAjaxServlet.java：

2016年12月12日 星期一

JQuery Ajax傳遞陣列時參數名不要帶中括弧的方法

2015年6月27日 星期六

Ajax、JQuery與Servlet的簡單範例

2016年12月12日星期一

2015年6月27日星期六