AJAX學習筆記01
學習課程：
學習步驟：
1.建立Java Web 項目——AJAX_01：
2.建立Servlet，包名test ，類名AjaxServlet，doPost()代碼：
- request.setCharacterEncoding( "utf-8" );
- response.setContentType("text/html;charset=utf-8");
- PrintWriter out = response.getWriter();
- String s = request.getParameter( "username" );
- out.print( "返回結果:" + s );
|
3.修改index.jsp頁面代碼：
- <div id="result"></div>
- <form id="form1" action="servlet/AjaxServlet" method="post">
- <input type="text" id="username" name="username"/>
- <input type="button" id="submit" value="提交"
- onclick="verify()"/>
- </form>
|
4.在WebRoot下建立包jslib，將jquery.js放到這個包中，並且建立verify.js檔案，寫入代碼：
- function verify(){
- //1.擷取文字框中的內容
- var jqueryObj = $("#username");
- var username = jqueryObj.val();
- alert( username );
- //2.將文字框中的資料發送給Servlet
- //懷疑下面一句代碼向Servlet發送資料的時候，對於中文會傳遞亂碼
- //因為如果在編輯框中直接輸入斷行符號的話，會直接載入Servlet，而單擊按鈕之後是先載入這個JS頁面，
- //然後通過這個JS頁面將得到的資料傳遞給Servlet
- $.get( "servlet/AjaxServlet?username=" + username , null , callback/*回呼函數*/ );
- }
- function callback(data){
- alert( "伺服器的資料回來了" );
- //3.接受伺服器端返回來的資料
- var resultObj = $("#result");
- //4.將伺服器端返回來的資料動態顯示到頁面上
- resultObj.html( data );
- }
|
5.在index.jsp中匯入js代碼：
- <script type="text/javascript" src="jslib/verify.js"></script>
- <script type="text/javascript" src="jslib/jquery.js"></script>
|
