Javaweb学习之AJAX

最新推荐文章于 2022-12-24 11:08:47 发布

小丸与小鹿

最新推荐文章于 2022-12-24 11:08:47 发布

阅读量233

点赞数 1

文章标签： Javaweb学习之AJAK

本文链接：https://blog.csdn.net/qq_41425382/article/details/96431712

版权

Javaweb学习之AJAX

今天给大家带来的是AJAX的项目分析。
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
项目内容简介：今天做的是一个关于使用AJAX来做一个在登陆之前做一个用户姓名的匹配。
工具：IDEA2018.2.2、Tomcat 7.0.9、jdk 1.8.0 、c3p0,jdbc。

一、先打开一个IDEA

1、首先打开一个IDEA并且创建好一个Javaweb项目工程

二、创建好两个jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录页面</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/login.css" rel="stylesheet">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>

    <div class="container text-center">
        <form class="form-signin" action="/loginServlet">
            <h2 class="form-signin-heading">登录页面</h2>
            <input type="text" id="userName" name="userName" class="form-control" placeholder="用户名" required autofocus>
            <input type="password"  id="password" name="password" class="form-control" placeholder="密码" required>
            <input type="button" οnclick="login()" value="登录" class="btn btn-lg btn-primary btn-block">
            <%--<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>--%>
        </form>
    </div>

</body>
<script>
    var  flag=true;
    $(function () {
        $("#userName").blur(function () {
            var userName=$("#userName").val();
            // alert(userName);
            $.post(
                "/userNameServlet",
                {"userName":userName},
                function(result) {
                    // alert(result)
                    if(result){
                        $("#userName").css("border","1px solid rgb(204, 204, 204)");
                        // alert(result)
                        flag=true
                    }else{
                        $("#userName").css("border","1px solid red");
                        // alert(result)
                        flag=false;
                    }
                },
                "json"
            )
        });
    });
    function login() {
        var userName=$("#userName").val();
        var password=$("#password").val();
        // alert(userName+"  "+password)
        if(flag){
            location.href="/loginServlet?userName="+userName+"&password="+password;
        }else{
            alert("用户不存在")
        }
    }
</script>
</html>

success.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title></title>
  </head>
  <body>
欢迎登陆
  </body>
</html>

三、准备好两个servlet

loginServlet

package com.zr.servlet;

import com.zr.bean.User;
import com.zr.service.UserService;
import com.zr.service.impl.UserServiceImpl;

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 javax.servlet.http.HttpSession;
import java.io.IOException;
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//        System.out.println("helloworld");
        HttpSession session=request.getSession();
//        //获取login.jsp中的userName
        String userName=request.getParameter("userName");
        String password=request.getParameter("password");
//        System.out.println(userName+"helloworld"+password);
        User us=new User(userName,password);
         UserService su=new UserServiceImpl();
//         su.login(us);
        if(su.login(us)){
            session.setAttribute("flage",1);
            request.getRequestDispatcher("/success.jsp").forward(request,response);
        }else{
            request.getRequestDispatcher("/error.jsp").forward(request,response);
        }
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request,response);
    }
}

userNameServlet

package com.zr.servlet;

import com.zr.service.UserService;
import com.zr.service.impl.UserServiceImpl;

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;
@WebServlet("/userNameServlet")
public class userNameServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String userName = request.getParameter("userName");
        UserService us=new UserServiceImpl();
        boolean flag=us.selectUserName(userName);
        response.getWriter().write(flag+"");
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

小丸与小鹿

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Javaweb学习之AJAX

Javaweb学习之AJAX 今天给大家带来的是AJAX的项目分析。 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。项目内容简介：今天做的是一个关于使用AJAX来做一个在登陆之前做一个用户姓名的匹配。工具：ID...
复制链接

扫一扫