Servlet+Ajax交互基础案例以及Axios简化请求方式简单解析

最新推荐文章于 2022-11-09 10:26:16 发布
最新推荐文章于 2022-11-09 10:26:16 发布
阅读量5.7k 收藏 5
点赞数
分类专栏： java 文章标签： servlet ajax java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45514735/article/details/126375460
版权

目录

一、创建webapp项目

二、创建基础静态Ajax案例

三、创建动态交互Ajax案例 

四、实战应用：用户注册

五、 Axios

六、Axios别名

 

一、创建webapp项目

使用maven创建基础webapp模板项目即可

pom.xml依赖和插件

<dependencies>
    <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>4.0.1</version>
      <scope>provided</scope>
    </dependency>

    <!-- https://mvnrepository.com/artifact/javax.servlet/jsp-api -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.0</version>
      <scope>provided</scope>
    </dependency>

    <!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/taglibs/standard -->
    <dependency>
      <groupId>taglibs</groupId>
      <artifactId>standard</artifactId>
      <version>1.1.2</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>8.0.30</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/org.mybatis/mybatis -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.5.10</version>
    </dependency>

    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
    <dependency>
      <groupId>javax.annotation</groupId>
      <artifactId>javax.annotation-api</artifactId>
      <version>1.2</version>
    </dependency>
  </dependencies>

  <build>
    <plugins>
      <plugin>
        <groupId>org.apache.tomcat.maven</groupId>
        <artifactId>tomcat7-maven-plugin</artifactId>
        <version>2.2</version>
      </plugin>
    </plugins>
  </build>

 

二、创建基础静态Ajax案例

<script>
    //创建核心对象
    var xhttp;
    if (window.XMLHttpRequest){
        xhttp=new XMLHttpRequest();
    }else {
        xhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //发送请求
    xhttp.open("GET","/ajaxdemo/ajax1.html");
    xhttp.send();
    //获取响应
    xhttp.onreadystatechange=function (){
        if (this.readyState==4 && this.status==200){
           alert(this.responseText);
        }
    };
</script>

1、在这个案例中if-else用来对不同的的浏览器获取ajax对象

2、发送请求部分

        open（）用来设置请求方式以及链接，可以是资源目录，也可以是完整的http链接

        send（）用来发送请求，当请求方式为post的时候这里被用来放参数

xhttp.send("username=zhangsan&password=lisi");

3、获取响应

        这里的readyState、status都是响应状态码,保证正确响应数据的前提下进行处理。

        将获取到的响应信息作为文本被弹出来

 

 4、演示

这就是一个简单的异步加载，控制台内可以看到类型是xhr。

 

 

 

 

三、创建动态交互Ajax案例 

        1、创建servlet，添加以下代码。

@WebServlet("/ajaxservlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req,resp);

    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String a = req.getParameter("a");
        String b = req.getParameter("b");
        resp.getWriter().write(a+" "+b);
    }
}

                doPost的作用是将处理交给doGet处理，因为都是HttpServlet对象，不是原生的，方法都封装好了，可以直接处理，

                req.getParameter("a")获取传过来的参数，get、post都可以，直接用名字就行，官方都封装好了,

                resp.getWriter().write(a+" "+b);写入响应数据
 

         2、创建前端网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //创建核心对象
    var xhttp;
    if (window.XMLHttpRequest){
        xhttp=new XMLHttpRequest();
    }else {
        xhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //发送请求
    xhttp.open("post","/ajaxdemo/ajaxservlet");
    //设置post请求头
    xhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhttp.send("a=Ajax&b=hello");
    //获取响应
    xhttp.onreadystatechange=function (){
        if (this.readyState==4 && this.status==200){
            alert(this.responseText);
        }
    };
</script>
</body>
</html>

        1、open设置访问路径

        2、setRequestHeader设置响应头

        3、send提交post请求参数 a=Ajax b=hello

        4、回调函数弹出响应内容，我们设置的是返回a和b两个参数

 

3、效果 

 

四、实战应用：用户注册

移出输入框自动检查数据是否合法 

1、创建前端页面

        1）创建输入框

        2）创建错误提示并隐藏

        3）为输入框绑定失去焦点事件

        4）事件向后端请求数据用户名是否存在

（用户查询过于复杂，我们设置后端固定返回）

        5）事件判断，对错误提示取消隐藏or隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form>
  名字：<input type="text" name="username" id="username">
  <span id="username_err" style="display: none">用户名含有违禁词或已存在</span>
</form>
<script>
  //绑定失去焦点事件
  document.getElementById("username").onblur=function() {
      //获取参数值
    var username = this.value;
      //发送ajax请求

      //创建核心对象
      var xhttp;
      if (window.XMLHttpRequest){
        xhttp=new XMLHttpRequest();
      }else {
        xhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      //发送请求
      xhttp.open("post","http://localhost:8080/ajaxdemo/selectUser");
      xhttp.send(username);
      //获取相应
      xhttp.onreadystatechange=function (){
        if (this.readyState==4 && this.status==200){
            if(this.responseText=="true"){
              //用户名存在,显示提示信息
                console.info(this.responseText);
              document.getElementById("username_err").style.display="";
            }else {
              // 用户名不存在，清除提示信息
              document.getElementById("username_err").style.display="none";
            }
        }
      };

  };

</script>
</body>
</html>

2、创建后端页面

        1）接受用户名

        2）判断是否存在（过于复杂，演示制作了固定返回），存在返回true，html获取到true后将错误提示的”隐藏“属性删除。

@WebServlet("/selectUser")
public class selectUser extends HttpServlet  {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req,resp);

    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //接受用户名
        String username = req.getParameter("username");

        //调用查询用户名
        boolean flag = true;

        //响应标记
        resp.getWriter().write(""+flag);
    }
}

3、演示

失去焦点后

 

 

五、 Axios

 Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js
Axios 使用简单,包尺寸小且提供了易于扩展的接口。

官网：Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js

 

 使用准备

需要在前端引入Axios的js文件

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

 创建后端页面


@WebServlet("/axios")
public class axios extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req,resp);

    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {


        //接受请求参数
        String username = req.getParameter("username");
        //响应请求
        resp.getWriter().write(username+"hello Axios");
    }
}

创建前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
   axios({
     method:"post",
       url:"http://localhost:8080/ajaxdemo/axios",
       data :"username=zhangsan"
   }).then(function (response){
       alert(response.data);
   })
</script>
</body>
</html>

访问：

 

六、Axios别名

 别名方式更加简单，但是会降低阅读性。

将上面的前端改为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  // axios({
  //   method:"post",
  //     url:"http://localhost:8080/ajaxdemo/axios",
  //     data :"username=zhangsan"
  // }).then(function (response){
  //     alert(response.data);
  // })
  
  axios.post("/ajaxdemo/axios","username=zhangsan").then(function (response) {
      //回调函数
      alert(response.data);
  })
</script>
</body>
</html>

演示：

​​

 

年关
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
servlet+vue后端代码
05-04
servlet+vue后端代码，实现前端登录功能，根据用户名和密码登录，返回对应的响应给前端
javaIDEA新手研究的ajax访问servlet,html获取后台数据
01-12
在实际开发中，我们通常会使用更高级的库和框架，如jQuery、axios或Vue.js来简化Ajax操作，以及Spring MVC或Spring Boot来处理Servlet部分，提高开发效率和代码质量。 通过实践这个项目，你可以深入理解前端与后端...
Java——通过ajax与servlet进行简单的前后交互
Lanly-Li的博客
08-04 1944
今天我们一起来学习一下通过ajax和servlet实现一个简单的登录验证的前后交互 首先我们通过ajax将前端页面得到的数据传到我们的servlet中，也ajax将servlet中传回的返回值进行处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Inser...
[ vue ] axios 发送 POST 请求，后端不能通过 HttpServletRequest 获取参数
爪白白的个人博客
03-12 6697
https://www.cnblogs.com/similar/p/10680228.html
使用axios发送请求
nick665544的博客
11-09 422
http://localhost 发送ajax请求,请求http://localhost:8080。后台服务器:所有的请求加 /api前缀。上面三个只要有一个不一样, 形成跨域。使用nginx,其他的服务器处理跨域。在项目中配置一个处理跨域的过滤器。发送的请求加 /api前缀。使用axios发送请求。发送请求,报了如下错误。浏览器默认禁止跨域请求。
使用 javascript 通过 AJAX 向 servlet 发出 HTTP 请求示例
allway2的博客
03-18 3646
这篇文章解释了 Ajax 的基础知识以及如何使用 javascript 通过 AJAX 向 servlet 发出 HTTP 请求。 Ajax（异步 Javascript 和 XML）是一种我们可以在 Web 开发中使用的技术，用于创建更快的用户界面更新和更好的用户体验。Ajax 使用 XMLHttpRequest 对象与服务器进行通信。使用 ajax，用户可以在不提交页面或重新加载浏览器页面的情况下将数据发布到后端服务器。使用 servlet 创建 AJAX 示例应用程序非常简单。 在这篇文章
servlet模板
dxm809的博客
09-19 258
package ${enclosing_package}; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class ${primary_ty.
vue+servlet的文件上传案例.rar
01-11
在用户选择文件并点击提交按钮后，Vue.js会触发一个AJAX请求，通常是使用axios库，向后端Servlet发送POST请求。请求体中会携带文件数据，通常是以二进制形式附在FormData对象中。在发送请求时，需要设置合适的...
Ajax前后端交互需要文件
05-13
Ajax交互过程通常包括以下步骤： 1. **创建XMLHttpRequest对象**：在JavaScript中，我们需要创建一个XMLHttpRequest实例，它是实现Ajax的核心。 2. **配置请求**：设置HTTP方法（GET或POST）、URL、是否异步执行等...
使用原生Servlet+Vue+MySql实现的留言板系统.zip
08-16
在构建一个基于原生Servlet、Vue.js和MySQL的留言板系统时，我们需要理解这些技术的核心概念以及如何将它们整合在一起以实现动态数据交互和持久化存储。以下是对这些知识点的详细说明： 1. **Servlet**: Servlet是...
ajax与Servlet交互
09-17
使用Struts2和jQuery EasyUI实现简单CRUD系统，从零开始，从基础的ajax与Servlet的交互开始。
AJAX+servlet实例入门
02-28
AJAX+servlet实例入门,简单易学，5分钟搞定AJAX
Ajax+servlet实现搜索框智能提示
03-19
使用Ajax+servlet技术模拟搜索框智能提示。
Ajax 与 Servlet
华 英雄
03-28 770
  Ajax异步请求,servlet产生随机数据,Html页面无刷新显示。运行环境：jdk1.5+tomcat 5.5 一、ajaxServlet.javapackage com;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import j
vue-cli3axios请求的时候 是本机地址_Request 请求
weixin_32236693的博客
01-24 1114
1.0请求对象请求，顾明思议，就是使用者希望从服务器端索取一些资源，向服务器发出询问。在B/S架构中，就是客户浏览器向服务器发出询问。在我们的JavaEE工程中，客户浏览器发出询问，要遵循HTTP协议所规定的。请求对象，就是在JavaEE工程中，用于发送请求的对象。我们常用的对象就是ServletRequest和HttpServletRequest，它们的区别就是是否和HTTP协议有关。1.1 常...
ajax servlet设置响应,在jquery的请求ajax与在servlet中的响应ajax
weixin_30666407的博客
08-05 209
这次给大家带来在jquery的请求ajax与在servlet中的响应ajax，在jquery的请求ajax与在servlet中的响应ajax的注意事项有哪些，下面就是实战案例，一起来看一下。在jsp中，首先，你需要导入jquery的架包：获取可返回站点的根路径：String path = request.getContextPath();%>在jquery中写ajax请求：$(functio...
解决axios.post 请求HttpServletRequest.getParameter获取不到值
Laozizuiku的博客
09-03 1646
工具类 public class ServletRequestUtil { private static ObjectMapper om = new ObjectMapper(); public static HashMap<String,Object> getJson(InputStream getInputStream) throws IOException { BufferedReader br = new BufferedReader(new In.
ajax与servlet之间的交互方式
weixin_35982117的博客
10-23 974
1.配置web.xml:<servlet> <servlet-name>ActionServlet</servlet-name> <servlet-class>web.ActionServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ActionServlet</servlet-name> <url-
ajax和servlet交互
aoyuan4706的博客
01-26 147
网上有比较多的教程来将如何实现ajax与servlet的交互了，这里和这里的教程可以参考参考，在此处我只简单说明一下，并记录一下我这次遇到的问题。 整个思路是：写个js函数，在里面使用XHR(ajax的教程）的open和send方法与服务器进行交互 我遇到的问题是将setRequestHeader的第二个参数设置错了，导致send发送的数据服务器没有接收到。正确的形式如下： x...
ajax请求接口正常，axios请求失败
最新发布
02-29
当使用Ajax请求接口时，通常会使用XMLHttpRequest对象或者fetch API来发送请求。而当使用axios库发送请求时，它实际上是基于XMLHttpRequest对象封装的。 如果你遇到了Ajax请求接口正常，但是axios请求失败的情况，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值