ajax 實現局部頁面更新

導入

導入

 

 

 

<script src="views/js/jquery-2.1.0.js"></script>
  <script>
    //name:username
    username.onblur = function () {                       //多個數據傳遞使用英文逗號隔開
      $.post("/yuer/ajaxIsLogin",{username:username.value,age:19},function (data) {
        //第一個參數：響應的servlet地址，第二個參數：傳遞servlet過去的參數，第三個參數：接受回傳的參數
        if(data.code == "110"){
          $("#usernameMessage").html("此用戶名已被使用").css("color","red");
        }else{
          $("#usernameMessage").html("您可以使用此用戶名").css("color","green");
        }
      });
    }
  </script>

servlet頁面

package com.person.servlet;

import com.alibaba.fastjson.JSON;
import com.person.dao.IUserDAO;
import com.person.dao.impl.UserDAOImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

@WebServlet("/ajaxIsLogin")
public class IsLoginServlet extends HttpServlet {
    /**
     * ajax傳遞局部刷新
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        IUserDAO userDAO = new UserDAOImpl();
        boolean exits = userDAO.ajaxIsLogin(username);
        resp.setContentType("text/json;charset=UTF-8");
        PrintWriter out=resp.getWriter();
        Map<Object,Object> map = new HashMap<>();
        if (exits){
            map.put("code","110");
            map.put("message","error");
        }else {
            map.put("code","120");
        }
        String s = JSON.toJSONString(map);
        out.write(s);
        out.close();
    }
}