Ajax的基本使用

最新推荐文章于 2022-07-31 15:57:04 发布

冷亿！

最新推荐文章于 2022-07-31 15:57:04 发布

阅读量112

点赞数 2

文章标签： ajax java javascript

本文链接：https://blog.csdn.net/qq_63130170/article/details/124531476

版权

Ajax的基本使用

文章目录

Ajax的基本使用
- - - 什么是ajax

什么是ajax

Ajax：只刷新局部页面的技术

在这里插入图片描述

JavaScript：更新局部的网页
XML：一般用于请求数据和响应数据的封装
XMLHttpRequest对象：发送请求到服务器并获得返回结果
CSS：美化页面样式
异步：发送请求后不等返回结果，由回调函数处理结果

使用Ajax完成无刷新

讲解

无刷新：不刷新整个页面，只刷新局部

无刷新的好处:

只更新部分页面，有效利用带宽，提高用户体验

在这里插入图片描述

servlet.java

/**
 *    处理登录功能
 **/
@WebServlet("/login.do")
public class LoginServlet extends HttpServlet {
 
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }
 
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取表单数据
        String account = req.getParameter("account");
        String password = req.getParameter("password");
        //调用biz去数据库做验证
        PrintWriter out = resp.getWriter();
        if("root".equals(account)&&"root123".equals(password)){
            out.println("yes");
        }else{
            out.println("no");
        }
    }
}

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<div>
    <p><input id="account" name="account"></p>
    <p><input id="password" name="password"></p>
    <button onclick="login()">登录</button>
</div>
<script>
    function login() {
        //取到页面的值
        let account = $("#account").val()
        let password = $("#password").val()
        //通过jquery来发送请求ajax去后台 login.do
 
        //1.使用ajax方法：get，post都支持
        $.ajax({
            url:"login.do",//访问地址
            data:{account,password},//携带的数据
            dataType:"text",//希望后台给你什么样子的数据
            type: "get",//什么请求类型
            success(resp){
                if (resp.trim() === "yes") {
                    alert("登陆成功")
                    location.href = "index.jsp"
                } else {
                    alert("登陆失败")
                }
            },//成功
            error(){
 
            }//错误
        })

Ajax请求（三种）

ajax

在这里插入图片描述

$.ajax({
			url:"login.do",//访问地址
			data:{account,password},//携带数据
			dataType:"text",//希望后台给你什么样子的数据
			type:"get",//什么请求类型
			success(resp){
				if(resp.trim()==="yes"){
					alert("登录成功")
					location.href="index.jsp"
				}else{
					alert("登录失败")
				}
			},//成功
			error(){
				
			}//错误
		})

post

在这里插入图片描述

 $.post(
            //请求地址
            "login.do",
            //携带过去的数据 直接放数据,名字就是数据的名字
            {account, password},
            //回调函数 请求之后会调用这个函数
            //resp就是后台给我的值
            function (resp) {
                //trim 去空格
                //contains 包含
                if (resp.trim() === "yes") {
                    alert("登陆成功")
                    location.href = "index.jsp"
                } else {
                    alert("登陆失败")
                }
            },
            "text" //希望后台给我的是普通的文本
        )

get (与post请求相同)

在这里插入图片描述

 $.post(
            //请求地址
            "login.do",
            //携带过去的数据 直接放数据,名字就是数据的名字
            {account, password},
            //回调函数 请求之后会调用这个函数
            //resp就是后台给我的值
            function (resp) {
                //trim 去空格
                //contains 包含
                if (resp.trim() === "yes") {
                    alert("登陆成功")
                    location.href = "index.jsp"
                } else {
                    alert("登陆失败")
                }
            },
            "text" //希望后台给我的是普通的文本
        )