1. 程式人生 > >AJAX向後臺傳遞資料(包括陣列)的方法

AJAX向後臺傳遞資料(包括陣列)的方法

我是一個Java Web新手程式設計師,今天來總結一下用AJAX向後臺傳遞資料的寫法,如有問題歡迎指正。

首先我們來重申一下在JQuery中封裝的AJAX的寫法(相對於原生js寫法):

$.ajax({
			type : "post",
			url : "Student_Change_Password",
			data : $("#form").serialize(),
			success : function(msg){
				alert(msg);
			},
			error : function(msg){
				alert("error");
			},
			complete : function(){
				
			},
		});

其中,

type是HTML請求型別,可以選post或get;

url是目標路徑,可以是jsp或servlet;

data是要傳輸給目標路徑的資料,$("標籤id").serialize()是將所選標籤內容序列化成JSON資料的方法,比如裡面寫form標籤的id,那麼這個form表單裡面的標籤都會被寫入data中。目標檔案取的時候直接request.getParameter("標籤name")即可;

success,error,complete是回撥函式。AJAX是前臺和後臺進行非同步通訊的過程,前臺發data給後臺,後臺還得發點資料回來,回來後的落腳點就是回撥函式。如果AJAX通訊成功了,就執行success方法;失敗了就執行error方法;執行完success或error後執行complete方法,表示AJAX通訊結束。

本文就是要介紹一下:data怎麼寫

P.S:JavaScript基本資料型別:字串、數字、布林、陣列、物件、Null、Undefined

舉一個例子:在jsp頁面中,利用<%%>取到了上個頁面傳來的兩個資料,一個字串,一個整型。在JS中定義了一個數組。使用AJAX傳這三個變數。

<%
String req_str = request.getParameter("str");
Integer req_id = request.getParameter("id");
%>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>//引入JQuery檔案,src的內容因專案路徑而異
<script type="text/javascript">
    var str = '<%= req_str %>';//字串型別不要忘記引號!
    var id = <%= req_id %>;
    var arr = new Array();//定義一個數組
    
    for(var i = 0; i < id;i++){
        arr[i] = i;
    }
    
    $(function(){//是頁面載入時執行的初始化方法,類似C++的構造方法
    //注意下面括號匹配
    $("#觸發AJAX的標籤id").click(function (){//click方法是標籤點選時觸發
        $.ajax({
                        type : "post",
                        url : "Student_Judge",//servlet
                        contentType:"json",
                        data : {"a_arr":arr,"a_id":id,"a_str":str},
                        traditional : true,//如果要傳陣列,這行一定要加!用傳統的方式來序列化資料
                        success : function(msg){
                            alert(msg);
                        },
                        error : function(){
                            alert("error");
                        },
               });
          });//click
     });//初始化方法
 </script>

JSP頁面編寫完畢,接下來看一下servlet的部分(如果AJAX的url寫的是jsp,那就去目標jsp中用<%java程式碼%>取值,和這個jsp那段類似),如果type選post,那麼就會訪問servlet的doPost()方法;如果type是get,就會訪問doGet()方法。

protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
    String str = request.getParameter("a_str");
    Integer id = Integer.valueOf(request.getParameter("a_id"));//Integer.valueOf() 將字串轉換成Integer型別
    String[] arr = request.getParameterValues("a_arr");//getParameterValues() 取陣列
}