Ajax的不同使用方式

2024-04-03 22:42:58

目录

servlet依赖

    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
      <scope>provided</scope>
    </dependency>

servlet地址映射 web.xml

  <servlet>
    <servlet-name>GetInfo</servlet-name>
    <servlet-class>servlet.GetInfoServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>GetInfo</servlet-name>
    <url-pattern>/GetInfo</url-pattern>
  </servlet-mapping>

JavaScript源代码方式

Ajax的不同使用方式

get请求方式

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <center>
        <form onsubmit="return false">
            <label>用户名：
                <input type="text" id="name">
            </label><br/>
            <label>密码：
                <input type="password" id="password">
            </label><br/>
            <input type="submit" onclick="sendInfo()">
        </form>
    </center>
</body>

<script>
    function sendInfo(){
        //创建异步对象
        var xhr = new XMLHttpRequest();
        var name = document.getElementById("name").value;
        var password = document.getElementById("password").value;

        //绑定函数 请求成功后执行的函数
        xhr.onreadystatechange = function (){
            //判断请求状态 满足这两个条件说明请求成功
            if (xhr.readyState === 4 && xhr.status === 200){
                //获取返回的数据 获取到的是servlet中输出到页面的数据 servlet不会再输出到页面
                var response = xhr.responseText;
                //截取返回的数据
                response = response.substring(0,7);
                if (response === "success"){
                    alert("注册成功\n你的用户名是：" + name + "\n密码是：" + password);
                }else {
                    alert("注册失败");
                }
            }
        }
        //请求方式 ，请求地址和请求参数
        xhr.open("get","GetInfo?name=" + name + "&password=" + password);
        //发送请求
        xhr.send();
    }
</script>

</html>

servlet

@WebServlet(name = "GetInfoServlet", value = "/GetInfoServlet")
public class GetInfoServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name = request.getParameter("name");
        String password = request.getParameter("password");
        if (name.equals("张三") && password.equals("123")) {
//            success就是Ajax获取到的是据
            response.getWriter().println("success");
        } else {
//            false就是Ajax获取到的数据
            response.getWriter().println("false");
        }
    }
}

效果
Ajax的不同使用方式


post请求方式

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <center>
        <form onsubmit="return false" style="margin-top: 100px">
            <label>用户名：
                <input type="text" id="name">
            </label><br/>
            <label>密码：
                <input type="password" id="password">
            </label><br/>
            <input type="submit" onclick="sendInfo()">
        </form>
    </center>
</body>

<script>
    function sendInfo(){
        //创建异步对象
        var xhr = new XMLHttpRequest();
        var name = document.getElementById("name").value;
        var password = document.getElementById("password").value;

        //绑定函数 请求成功后执行的函数
        xhr.onreadystatechange = function (){
            //判断请求状态 满足这两个条件说明请求成功
            if (xhr.readyState === 4 && xhr.status === 200){
                //获取返回的数据 获取到的是servlet中输出到页面的数据 servlet不会再输出到页面
                var response = xhr.responseText;
                //截取返回的数据
                response = response.substring(0,7);
                if (response === "success"){
                    alert("注册成功\n你的用户名是：" + name + "\n密码是：" + password);
                }else {
                    alert("注册失败");
                }
            }
        }
        //请求方式 ，请求地址，true表示发送一个异步请求，请求参数不直接添加到请求地址中
        xhr.open("post","GetInfo",true);
        //使用post请求方式要加这句
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
        //发送请求，请求参数放到这里
        xhr.send("name="+name+"&password="+password);
    }
</script>

</html>

servlet

@WebServlet(name = "GetInfoServlet", value = "/GetInfoServlet")
public class GetInfoServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //        post请求方式要设置编码格式，不然获取到的表单数据乱码
        request.setCharacterEncoding("utf-8");
        String name = request.getParameter("name");
        String password = request.getParameter("password");
        if (name.equals("张三") && password.equals("123")) {
//            success就是Ajax获取到的是据
            response.getWriter().println("success");
        } else {
//            false就是Ajax获取到的数据
            response.getWriter().println("false");
        }
    }
}

效果
Ajax的不同使用方式


jQuery方式

Ajax的不同使用方式

get请求方式

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <center>
        <form onsubmit="return false" style="margin-top: 100px">
            <label>用户名：
                <input type="text" id="name">
            </label><br/>
            <label>密码：
                <input type="password" id="password">
            </label><br/>
            <input type="submit" id="put">
        </form>
    </center>
</body>
<!--导入jQuery文件-->
<script src="jquery-3.5.1.js"></script>
<script>
    $("#put").click(function (){
        var name = $("#name").val();
        var password = $("#password").val();

        //jQuery的Ajax请求格式
        $.ajax({
            //请求地址
            url:"GetInfo",
            //请求方式
            type:"GET",
            //返回数据类型
            dataType:"text",
            //请求参数
            data:{"name":name,"password":password},
            //是否异步请求
            async:true,
            //请求成功后执行的函数,函数中的参数是返回的数据
            success:function (res){
                res = res.substring(0,7);
                if (res === "success"){
                    alert("注册成功\n你的用户名是：" + name + "\n密码是：" + password);
                }else {
                    alert("注册失败");
                }
            },
            //请求失败后执行的函数
            error:function (){
                alert("请求失败");
            }
        })
    })
</script>

</html>

servlet

@WebServlet(name = "GetInfoServlet", value = "/GetInfoServlet")
public class GetInfoServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String name = request.getParameter("name");
        String password = request.getParameter("password");
        if (name.equals("张三") && password.equals("123")) {
//            success就是Ajax获取到的是据
            response.getWriter().println("success");
        } else {
//            false就是Ajax获取到的数据
            response.getWriter().println("false");
        }
    }
}

效果
Ajax的不同使用方式


post请求方式

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <center>
        <form onsubmit="return false" style="margin-top: 100px">
            <label>用户名：
                <input type="text" id="name">
            </label><br/>
            <label>密码：
                <input type="password" id="password">
            </label><br/>
            <input type="submit" id="put">
        </form>
    </center>
</body>
<!--导入jQuery文件-->
<script src="jquery-3.5.1.js"></script>
<script>
    $("#put").click(function (){
        var name = $("#name").val();
        var password = $("#password").val();

        //jQuery的Ajax请求格式
        $.ajax({
            //请求地址
            url:"GetInfo",
            //请求方式
            type:"POST",
            //返回数据类型
            dataType:"text",
            //请求参数
            data:{"name":name,"password":password},
            //是否异步请求
            async:true,
            //请求成功后执行的函数,函数中的参数是返回的数据
            success:function (res){
                res = res.substring(0,7);
                if (res === "success"){
                    alert("注册成功\n你的用户名是：" + name + "\n密码是：" + password);
                }else {
                    alert("注册失败");
                }
            },
            //请求失败后执行的函数
            error:function (){
                alert("请求失败");
            }
        })
    })
</script>

</html>

servlet

@WebServlet(name = "GetInfoServlet", value = "/GetInfoServlet")
public class GetInfoServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //        post请求方式要设置编码格式，不然获取到的表单数据乱码
        request.setCharacterEncoding("utf-8");
        String name = request.getParameter("name");
        String password = request.getParameter("password");
        if (name.equals("张三") && password.equals("123")) {
//            success就是Ajax获取到的是据
            response.getWriter().println("success");
        } else {
//            false就是Ajax获取到的数据
            response.getWriter().println("false");
        }
    }
}

效果
Ajax的不同使用方式


相关文章

JS(jQuery+Ajax)+ResultSet指针移动实现无限滚动效果

Ajax入门小案例

上一篇：Ajax--记录


下一篇：2021-05-19 数据存储