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

前言：不积跬步无以至千里，不积小流无以成江河！

废话不多，以最简练的语言和实例初步了解Ajax！

 

一、Ajax简介

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

 

 二、Ajax用法

 

以JQuery写法：

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

 

    账号:
    
    

    密码:
    
    

    登录

 其Ajax请求用法如下：

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

三、实例演示

1、创建一个LoginAjax的jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    
    



    账号:
    
    

    密码:
    
    

    登录

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

密码错误：

密码正确：

跳转到主页

 

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

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

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

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