AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Ajax的不同使用方式

分类：Ajax作者：编程之家原文地址

目录

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源代码方式

在这里插入图片描述

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");
        }
    }
}

效果

在这里插入图片描述


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");
        }
    }
}

效果

在这里插入图片描述


jQuery方式

在这里插入图片描述

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");
        }
    }
}

效果

在这里插入图片描述


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");
        }
    }
}

效果

在这里插入图片描述


相关文章

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

Ajax入门小案例

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

ajax 上传文件项目下载
IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但是在某些特殊情况下，我们可能还需要使用IE6来访问网页。而在IE6中，我们通常会使用JavaScript来提交表单，来看一下具体操作。
ajax .post()
PHP中的count()函数是用来计算数组或容器中元素的个数。这个函数十分方便，在编写代码时使用频率也非常高。无论你是要统计数组的长度、统计字符串中字符出现的次数还是统计对象中属性的个数，count()都可以帮助你轻松
ajax 不返回值 写法
使用 AJAX（Asynchronous JavaScript and XML）技术可以在不刷新整个页面的情况下，向服务器发送请求并接收响应。通常来说，我们使用 AJAX 请求是为了获取后台数据，并将其展示在前端页面上。然而，有时候我们只需要
ajax 下载文件 blob
Ajax（Asynchronous JavaScript and XML）是一种用于改进网页用户体验的技术，通过与服务器进行异步通信，实现在网页上局部刷新数据而不必整个页面刷新的功能。在实际开发中，我们经常需要从服务器端下载文件，而传统
ajax 下载excel文件流
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以在不刷新整个页面的情况下，向服务器发送请求并获取响应数据。在某些场景下，我们需要通过AJAX下载Excel文件流，以便于在前端使用或保存到本地。本文将详
ajax .get .post
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax，我们可以在不刷新整个页面的情况下向服务器发送请求并获得响应数据。而在Ajax的基础上，.get和.post是两种常用的请求方法，它们分别用于发送GET和POST请
ajax 上传 excel
AJAX（Asynchronous JavaScript and XML）是一种在网页上实现异步数据传输的技术。通过AJAX，网页可以在不刷新整个页面的情况下与服务器进行数据交互，提升用户体验和页面性能。在实际应用中，AJAX广泛用于表单提交、
ajax 下拉 360取不到值
在使用Ajax下拉加载数据的过程中，有时候会出现无法取到360度的问题。这个问题可能是由于代码逻辑的问题导致的，也有可能是网络延迟引起的。为了解决这个问题，我们需要对代码进行仔细排查，并且在合适的地方添加适当
ajax 与 .post 区别
本文将介绍Ajax和.post之间的区别。Ajax是一种用于在网页上进行异步通信的技术，能够在不刷新整个页面的情况下更新部分页面内容。.post是jQuery中的一个方法，用于向服务器发送POST请求。虽然它们都可以用于发送异步
ajax 上传文件 目录权限
AJAX（Asynchronous JavaScript and XML）是一种在Web页面上进行异步数据请求和交互的技术。它的出现使得页面在后台与服务器进行数据交互的同时，不需要重新加载整个页面。在网页开发中，常常需要实现文件上传功能，
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native