JQuery Ajaxローカルリフレッシュ機能

2539 ワード

AjaxとJQueryの基本的な使い方を1つのケースで直接説明しましょう.ユーザー登録時に、現在のユーザー名が利用可能かどうかを判断し、ポップアップ形式でユーザーに通知します.ユーザー名がskhであれば登録は許可されません.そうでなければ、データベースを追加してテストしないので、面倒です.
Servlet:
package cn.skh.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class AjaxServlet
 */
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AjaxServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String test = request.getParameter("test");
		PrintWriter out = response.getWriter();
		if("skh".equals(test) ) {
			out.print("false");
		}else {
			out.print("true");
		}
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

フロントエンドJSP:
tips:注意しなければならないのは$.ajaxのフォーマットと必要なパラメータ.





Insert title here


$(document).ready(function(){
    //               
   $("#test").blur(function(){
       var test=$("#test").val();
       var msg1={
        		"test":test,
        };
       $.ajax({
            url:"AjaxServlet",//       ,  servlet   url-pattern
            type:"post",//     
            data:msg1,//         ,         
            datatype:"text",
            success:function(msg){//    ,msg      
           	 if(msg=="false")
				{ 
           		 alert("flase");
           		 
				}
			else{ 
				alert("true");
				
			}
			}
            }); 
    });
});

     

結果は大丈夫ですが、興味のある方は自分で検証してみてください.ここはマップにありません...