JQuery高级>>>>>>>>>>>>①Ajax异步请求

最新推荐文章于 2024-07-29 18:21:08 发布

TopGradeModel

最新推荐文章于 2024-07-29 18:21:08 发布

阅读量121

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_42129729/article/details/92849854

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JQuery高级>>>>>>>>>>>>①Ajax异步请求

前言

关于如何使用Ajax做异步请求处理表单界面用户名是否存在于数据库中的案例，使用eclipse开发，jsp+servlet进行基础演示。代码见下面.
1.再JSP界面中

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
 function blur1(){
  //获取文本框的内容
  var $name=$("input[name=username]");
  var name=$name.val();
  $.ajax({
   url:"/javaweb/loginServlet",
   //传值到后台
   data:{"uname":name},
   dataType:"text",
   error:function(){
    alert("错误");
   },
   success:function(data){
    if(data==1){
     //返回1则用户名存在
     $("#sp1").text("用户名已经存在");
    }else{
     //返回2则用户名不存在
     $("#sp1").text("用户名可以使用");
    }
   },
   type:"POST"
  });
 }
</script>
</head>
<body>
<form action="/javaweb/loginServlet" method="post">
 用户名:<input type="text" name="username" onblur="blur1()"><span id="sp1"></span><br>
 <input type="submit" value="提交"><br>
</form>
</body>
</html>

在servlet界面中

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import cn.hp.service.LoginService;
import cn.hp.service.LoginServiceImpl;public class LoginServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  //获取ajax中传过来的值
  String name = request.getParameter("uname");
  LoginService loginService=new LoginServiceImpl();
  //调用服务层方法传值到持久层
  int flag = loginService.registByName(name);
  //获得查询完数据库后返回的结果(是否有值)进行判断
  if(flag==0) {
   response.getWriter().write("0");
  }else {
   response.getWriter().write("1");
  }
 }
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  doGet(request, response);
 }}