AJAX向後臺傳遞資料(包括陣列)的方法
阿新 • • 發佈:2019-02-06
我是一個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() 取陣列
}