简单易懂：Ajax入门实例详解（登录功能）

悠悠 2023-10-10 20:14 143阅读 0赞

> **前言：****不积跬步无以至千里，不积小流无以成江河！**
> 
> **废话不多，以最简练的语言和实例初步了解Ajax！**

## 一、Ajax简介 ##

> Ajax（Asynchronous JavaScript and XML）是一种基于Web技术的编程实现方式，它使用JavaScript和XML来实现异步的数据交互。JavaScript负责发起请求和处理响应，而XML则负责将数据与页面分离。**Ajax能够在不刷新整个页面的情况下更新页面内容，提高了页面的响应速度和用户体验。**

## 二、Ajax用法 ##

> **以JQuery写法：**
> 
> **<script>**
> 
> $Ajax\{
> 
> url:请求的页面地址
> 
> method:请求方法（POST、GET、DELETE等等）
> 
> data 传输数据
> 
> \{
> 
> data1：数据1
> 
> data2：数据2
> 
> \}
> 
> dataType:数据类型
> 
> success：function（）请求成功后执行的方法
> 
> error：function（）请求失败后执行的方法
> 
> **</script>**

**结合 一个简单的登录页面来理解：**

![515669bd3e6242fd80215e9fd87b3a5f.png][]

其Ajax请求用法如下：

即获取两个输入框内值，传递给后端控制器进行逻辑处理，返回值为true则说明匹配成功则控制台打印成功！

## 三、实例演示 ##

### 1、创建一个LoginAjax的jsp页面 ###

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
        <script src="js/jquery-3.1.1.min.js"></script>
        <style>
            div{
                position: relative;
                left: 40%;
                top: 30%;
                float: left;
            }
        </style>
    </head>
    <body>
    <div>
        <span>账号:</span>
        <input type="text"  name="username">
        <br>
        <span>密码:</span>
        <input type="password"  name="password">
        <br>
        <button >登录</button>
    </div>
    <script>
        $("button").click(function () {
            var Username=$("input[name='username']").val();
            var Password=$("input[name='password']").val();
            $.ajax(
                {
                    url:"LoginAjax",
                    method:"post",
                    data:
                        {
                            username:Username,
                            password:Password
                        },
                    dataType:"json",
                    success:function (Result)
                    {
                        if (Result.result)
                        {
                            location.href="index.jsp";
                            console.log(Result.message);
                        }
                        else console.log(Result.message);
                    }
                });
        });
    </script>
    </body>
    </html>

### 2、编写LoginAjax类继承HTTPSerlet ###

package com.example.javatest;
    import com.fasterxml.jackson.databind.ObjectMapper;
    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("/LoginAjax")
    public class LoginAjax extends HttpServlet {
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//无论是GET还是POST都能用Get方法实现
            doGet(req, resp);
        }
        @Override
        public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
            String username=request.getParameter("username");
            String password=request.getParameter("password");
            ResultMap Rm=new ResultMap();
            request.setCharacterEncoding("utf-8");
            try {
                if (username.equals("admin")&&password.equals("pwd"))
                {
                    Rm.setMessage("Success!");
                    Rm.setResult(true);
                }
                else
                {
                    Rm.setResult(false);
                    Rm.setMessage("False!");
                }
            }
            catch (Exception e)
            {
                e.printStackTrace();
            }
            ObjectMapper Om=new ObjectMapper();//把对象转换成json格式
            String jason=Om.writeValueAsString(Rm);
            response.getWriter().println(jason);
    
        }
    }

## 3、结果集类ResultMap ##

package com.example.javatest;
    public class ResultMap {
        protected String message;
        protected  boolean result;
    
        public String getMessage() {
            return message;
        }
    
        public void setMessage(String message) {
            this.message = message;
        }
    
        public boolean getResult() {
            return result;
        }
    
        public void setResult(boolean result) {
            this.result = result;
        }
    }

## 四、结果测试 ##

启动TomaCat，浏览器访问对应的页面输入账号密码：

密码错误：

![3b301e125a344c2d886981d651b546c4.png][]

密码正确：

跳转到主页

![eb61f8ee19e84fe8af429701d7e2e914.png][]

> **发文不易，恳请大佬们高抬贵手！**
> 
>   
> **点赞：随手点赞是种美德，是大佬们对于本人创作的认可！**
> 
>   
> **评论：往来无白丁，是你我交流的的开始！**
> 
>   
> **收藏：愿君多采撷，是大佬们对在下的赞赏！**

[515669bd3e6242fd80215e9fd87b3a5f.png]: https://img-blog.csdnimg.cn/515669bd3e6242fd80215e9fd87b3a5f.png
[3b301e125a344c2d886981d651b546c4.png]: https://img-blog.csdnimg.cn/3b301e125a344c2d886981d651b546c4.png
[eb61f8ee19e84fe8af429701d7e2e914.png]: https://img-blog.csdnimg.cn/eb61f8ee19e84fe8af429701d7e2e914.png