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

最新推荐文章于 2024-04-29 16:59:00 发布

置顶 kook小辉的进阶

最新推荐文章于 2024-04-29 16:59:00 发布

阅读量3.1k

点赞数 14

分类专栏： Java面试基础题文章标签： ajax 前端 javascript servlet

本文链接：https://blog.csdn.net/m0_55278347/article/details/130814698

版权

Java面试基础题专栏收录该内容

5 篇文章 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>

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

<body>
<div>
    <span>账号:</span>
    <input type="text"  name="username">
    <br>
    <span>密码:</span>
    <input type="password"  name="password">
    <br>
    <button >登录</button>
</div>
</body>

其Ajax请求用法如下：

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

<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)
                {
                    
                        console.log(“登录成功！”);
                   
                }
            });
    });
</script>

三、实例演示

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，浏览器访问对应的页面输入账号密码：

密码错误：

密码正确：

跳转到主页

发文不易，恳请大佬们高抬贵手！

点赞：随手点赞是种美德，是大佬们对于本人创作的认可！

评论：往来无白丁，是你我交流的的开始！

收藏：愿君多采撷，是大佬们对在下的赞赏！

kook小辉的进阶

关注

14
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
9
评论
简单易懂：Ajax入门实例详解（登录功能）

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

扫一扫