Ajax的不同使用方式

最新推荐文章于 2024-03-13 07:00:00 发布
最新推荐文章于 2024-03-13 07:00:00 发布
阅读量238 收藏
点赞数 1
分类专栏： 前端 笔记 JAVA 文章标签： ajax js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45675449/article/details/117157311
版权
JAVA 同时被 3 个专栏收录
45 篇文章 1 订阅
订阅专栏
笔记
26 篇文章 1 订阅
订阅专栏
前端
3 篇文章 0 订阅
订阅专栏

目录

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入门小案例

SmallSweets
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax的使用四大步骤
10-21
以下将详细解释如何使用Ajax的四大步骤，这四个步骤分别是创建XMLHttpRequest对象、使用open()和send()方法发送请求、使用responseText或responseXML属性接收响应以及设置onreadystatechange函数处理服务器的响应。...
Ajax的使用代码解析
10-21
- 在实际使用中，我们通常会封装一个函数，用于生成xhr对象，并将open和send的调用封装在函数内，以方便在不同的调用场景中重复使用。 - 使用Ajax时，不需要刷新页面，可以只更新页面的一部分，比如使用DOM操作来...
不同途径的ajax请求
weixin_42184310的博客
03-18 139
1、原生js(该方式一般需要封装) 通过创建XMLHttpRequest的方式 let xhr = new XMLHttpRequest(); xhr.open('get', url); xhr.send(params); xhr.onreadystatechange = function () { if (this.readyState === 4...
jQuery 完整 ajax示例
热门推荐
：）
06-17 21万+
$(function(){ //请求参数 var list = {}; // $.ajax({ //请求方式 type : "POST", //请求的媒体类型 contentType: "application/json;chars...
Jquery的ajax用法
ICY___的博客
10-10 289
这篇博客将介绍在jquery中使用ajax的用法和jsonp跨域问题。 在jquery中，共有4中常用的ajax方法：ajax get post getJSON 用法相差不大 话不多说，看代码： <!DOCTYPE html> <html lang="en"> <head> <meta chars...
JQuery的ajax用法
l2535460824的博客
07-03 176
&lt;script type="text/javascript" src="js/jquery-1.12.4.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(function(){ $("#username").blur( function() { $.ajax({ t
jQuery ajax使用方法
苍白的咏叹调的博客
05-13 4956
ajax使用方式 type： 默认值: "GET")。请求方式 ("POST" 或 "GET")， 默认为 "GET" url： 默认值: 当前页地址。发送请求的地址。 data： 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。 必须为 Key/Value 格式 contentType： 发送信息至服务器时内容编码类型。 dataType： 预期服务...
Datatables使用Ajax方式读取数据
01-11
在"Datatables使用Ajax方式读取数据"这个主题中，我们需要关注以下几个关键点： 1. **初始化Datatables**：在HTML中创建一个空的表格，并使用jQuery选择器找到它，然后调用Datatables插件进行初始化。例如： ```...
ajax与websocket的区别以及websocket常用使用方式 介绍
10-18
它们都用于实现实时的、异步的数据交换，但它们的实现方式和适用场景有所不同。 ### AJAX的定义和使用场景 AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够更新部分网页的...
AJAX的使用方法详解
12-20
在JavaScript中，我们通常使用`new XMLHttpRequest()`来创建一个AJAX对象。这个对象是浏览器内置的，用于与服务器进行HTTP通信。创建后，我们可以通过这个对象的方法和属性来控制请求的发起、状态的监听以及响应的...
jQuery中Ajax的使用方法
ruxioniu的博客
05-14 514
逆战班学习总结 Ajax全称为“Asynchronous(异步) JavaScript And XML” 是指一种创建交互式网页应用的开发技术，通过在 后台与服务器进行少量数据交互，实现网页的异步更新，在不重新加载整个界面的情况下，做到网页的部分刷新，极大地改善了用户体验。 jQuery对Ajax操作进行了封装，我们不需要考虑兼容和跨域的问题了。在jQuery中$.ajax()属于最底层的方法，load()，$.get()和$.post()属于第二层。 load() load()方法是最简单和常用的aja
jquery的ajax如何使用方法,jquery.ajax的方法使用
weixin_33838310的博客
08-06 371
$.ajax({type: 'post',url:"{:U('Admin/Shop')}",data:{id:id},dataType: "json",async:true,beforeSend:function () {//执行之前},success: function (info) {//请求成功},complete:function(){//执行之后},error: function (in...
jquery中ajax的用法详解
Rockandrollman的博客
10-03 290
jquery如何使用ajax
ajax在jQuery中的各种用法
积水成多
05-29 366
底层实现： 基本语法：jQuery.ajax(options)或$.ajax(options) 参数说明： ajax方法只有一个参数，要求是一个json对象 async ：是否异步，默认其值为true cache ：是否缓存，默认其值为true complete ：当Ajax状态码为4时，所触发的回调函数 contentType ：请求头信息，如果是post请求，applicat
JQuery中Ajax的基本用法
weixin_30325071的博客
05-11 99
一、JSON对象与JSON字符串JSON：轻量级的数据交换格式1、JSON对象：JSON对象就是键值对的集合，键与值之间用:分隔，多对键值对之间用,分隔注意：JSON对象，要求键必须使用""包裹的字符串。''无效！！！2、JSON字符串：将JSON对象，用字符串的形式进行包裹。 3、JSON对象与JSON字符串的相互转换： 　　① 对象-->字符串 JSON.stringify(obj)...
jQuery中的 ajax 方法
weixin_49982941的博客
08-17 105
知识点的罗列： 一、什么是AJAX？ （1） AJAX = 异步 JavaScirpt 和 XML。 （2） AJAX是一种用于创建快速动态网页的技术 （3） 通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。【AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术】 二、AJAX基于因特网标椎（使用以下技术结合）： （1） XMLHTTpRequest 对象（与服务器异步交互数据） （2） JavaScript/DOM （显示/取回信息） （3） CSS （设置数据的
「jQuery系列」jQuery中Ajax的运用
最新发布
日常笔记/总结/系列知识梳理
03-13 2623
jQuery Ajax 是 jQuery 提供的一个功能强大的异步通信方法，它允许网页与服务器之间进行数据交换，而无需重新加载整个页面。通过使用 Ajax，开发者可以实现更加流畅和响应式的用户体验，减少不必要的网络传输和页面加载时间。jQuery Ajax 的核心方法是$.ajax()，它提供了丰富的选项和回调函数，用于配置和执行 Ajax 请求。下面是一个基本的$.ajax()$.ajax({url: 'https://api.example.com/data', // 请求的 URL。
【Ajax】jQuery中Ajax的使用
Etui۹(･༥･´)و的博客
04-11 414
【Ajax】jQuery Ajax的使用 ​ 简介：jQuery提供多个与Ajax有关的方法。通过jQuery Ajax方法，能够使用HTTP Get和 HTTP Post从远程服务器上请求文本、HTML、XML或JSON同时能够把接受的数据更新到DOM对象。 1、$.ajax() $.ajax()是jQuery中Ajax请求的核心方法，所欲的其他方法都是在内部使用此方法。 语法： $.ajax({name: value, name: value, …}) 说明：参数是JSON格式的数据，包含请求
jQuery中ajax的使用（最详细）
小屁鸿的博客
08-02 3万+
jQuery中ajax的使用1.jQuery中ajax的基本使用2.jQuery中ajax的回调事件3.jQuery中ajax中的高度封装函数4.jQuery中ajax的全局事件 1.jQuery中ajax的基本使用 2.jQuery中ajax的回调事件 3.jQuery中ajax中的高度封装函数 4.jQuery中ajax的全局事件 ...
使用Ajax与服务器异步交互
然而，使用AJAX时，服务器端可能只需要返回部分数据，而不是整个页面。 AJAX的四大关键组成部分包括： 1. JavaScript：负责处理用户交互、创建XMLHttpRequest对象以及处理服务器响应。 2. CSS：用于美化和布局网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值