jQuery+Ajax로 사용자 이름을 확인하는 단계에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

jQuery+Ajax로 사용자 이름을 확인하는 단계에 대한 자세한 설명

May 03, 2018 pm 01:59 PM

단계 상해

이번에는 jQuery+Ajax 사용자 이름 확인 단계에 대해 자세히 설명하겠습니다. jQuery+Ajax 사용자 이름 확인 시 주의사항은 무엇인가요?

HTML

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/jquery_ajax/js/jquery-1.8.3.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
 //页面加载完成后
 $(function() {
  //添加失焦事件
  $("#username").blur(function() {
   //获取录入的用户名
   var usernamevalue = $("#username").val();
   //向服务器发送请求
   var url="/jquery_ajax/load";
   $("#username_span").load(url,{'username':usernamevalue});
  });
 });
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;input type=&quot;text&quot; name=&quot;username&quot; id=&quot;username&quot;&gt;&lt;span id=&quot;username_span&quot;&gt;&lt;/span&gt;
 &lt;br&gt;
 &lt;input type=&quot;password&quot; name=&quot;password&quot;&gt;
 &lt;br&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

LoginServlet

public class LoadServlet extends HttpServlet {
 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  // 解决乱码
  request.setCharacterEncoding("utf-8");
  response.setCharacterEncoding("utf-8");
  // 1.得到用户名
  String username = request.getParameter("username");
  // 2.判断用户名是否可以使用
  if ("tom".equals(username)) {
   // 用户名不可以使用
   response.getWriter().write("&lt;font color=&#39;red&#39;&gt;用户名被占用&lt;/font&gt;");
  } else {
   // 用户名可以使用
   response.getWriter().write("&lt;font color=&#39;green&#39;&gt;用户名可以使用&lt;/font&gt;");
  }
 }
 public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  doGet(request, response);
 }
}

로그인 후 복사

web.xml

&lt;servlet&gt;
 &lt;description&gt;&lt;/description&gt;
 &lt;display-name&gt;LoadServlet&lt;/display-name&gt;
 &lt;servlet-name&gt;LoadServlet&lt;/servlet-name&gt;
 &lt;!-- 
  Class clazz = Class.forName(&quot;com.zxl.servlet.LoadServlet&quot;);
  Object obj = clazz.newInstatnce();
  // 反射去调用 doGet, doPost
  --&gt;
 &lt;servlet-class&gt;com.zxl.servlet.LoadServlet&lt;/servlet-class&gt;
 &lt;/servlet&gt;
 &lt;servlet-mapping&gt;
 &lt;servlet-name&gt;LoadServlet&lt;/servlet-name&gt;
 &lt;url-pattern&gt;/load&lt;/url-pattern&gt;
 &lt;/servlet-mapping&gt;