首页 > 其他分享 >复选框数据通过axios和Vue传输到servlet后台

复选框数据通过axios和Vue传输到servlet后台

时间:2023-04-16 20:24:18浏览次数:117  
标签:el axios city 标签 复选框 checkbox Vue servlet

引言

本来是想百度一下如何将table标签里面嵌入的复选框通过axios以及Vue传输到Servlet后台;

百度之后才发现,是我草率了,原来可以直接用复选框标签进行传输(好吧,又暴露了自己基础不扎实的事实......)

相关实现步骤

1、将相关的标签el-checkbox引入进去

这里我们需要引入三个带有el的标签,el-checkobx-groupel-checkboxel-button这三个标签

这么来看的话,其实也就是基本上相当于table、tr、td这几个标签了吧!

2、在el-checkbox标签里面引入v-for属性

举例来说,可以这么写:

v-for="city in list" :label="city" :key="city"

//之后显示数据的话,同样是使用两个花括号将我们想要显示的数据显示出来

3、点击button按钮,实现数据传入后台

在button标签这里,同样是之前用过的的@click属性,实现点击事件

4、在script标签里面进行newVue的相关定义,基本与Vue没啥差别

标签:el,axios,city,标签,复选框,checkbox,Vue,servlet
From: https://www.cnblogs.com/liuzijin/p/17323517.html

相关文章

  • vue3中使用axios
    1、问题:在vue2中axios通常是经过封装的后挂载使用的,来处理token及报错处理,比如//main.jsimportajaxfrom'@/axios.js'Vue.prototype.ajax=ajax在项目中使用也很方便this.ajax就行了,那vue3中是如何简单、便捷的封装并使用呢2、思路:vue3中使用axios并不难,封装,然后......
  • node中使用axios时:Error: unable to verify the first certificate 报错
    参考https://www.daozhao.com/10611.html报错原因:  在使用浏览器访问时,客户端、服务器在握手阶段完成验证。当我们在node中使用axios请求时,客户端没法确认服务端的TLS证书解决方案1、局部constaxios=require('axios')consthttps=require('https')//在axios......
  • java.lang.NoSuchMethodException: com.innovation.web.BuyServlet.get(javax.servlet
    问题描述我将路径定义到相应的servlet的函数方法里面,然后就出现了这个问题,很明显的找不到相应的函数方法;问题解决将目光重新放到我定义的相关路径那里,发现我出于习惯,将servlet里面原本应该是名为checkIt的函数方法写成了get方法,改回去之后,这个问题也就解决啦!......
  • Servlet
    1.request和response的结构请求结构一个HTTP请求由以下部分组成:请求行(requestline):包含请求方法,URI和HTTP协议版本信息。请求头部(header):包含一些附加的元数据,如客户端浏览器的类型,所期望的响应内容等。消息正文(messagebody):在某些情况下,可以通过消息体传递请求参数和数据,......
  • 源码共读 | axios 工具函数
    前言Axios是一个非常流行的库,它可以让你简单、方便地发送HTTP请求。它可以用在浏览器和node.js中,并且支持跨域请求。在Github上拥有快接近10w颗星了,可见其受欢迎程度。下面就来学习一下axios工具函数的源码。仓库地址:axios/axios:PromisebasedHTTPclientfortheb......
  • Servlet
    Servlet关于系统架构:系统架构包括什么形式?C/S架构B/S架构1.C/S架构Client/Server(客户端/服务器)C/S架构的软件或者说系统有哪些例子QQC/S架构的特点:需要安装特定的客户端软件。C/S架构的系统优点和缺点分别是什么?优点:速度快(软件中的数据大部分都是集......
  • axios实现无感刷新token
    letisRefreshing=false标识当前正在刷新token//重试队列,每一项将是一个待执行的函数形式letrequests=[]axios.interceptors.response.use(response=>{const{code}=response.dataif(code===401){//具体code看和后端定义的是什么,这里是401co......
  • Servlet生命周期2
      销毁方法1.调用时机:内存释放或者服务器关闭的时候,Servlet对象会被销毁,调用2.调用次数:1次使用Terminal开启和关闭,就会出现destory被调用的信息 ......
  • Servlet生命周期1
    不要忘记导入这个tomcat的依赖<build><plugins><plugin><groupId>org.apache.tomcat.maven</groupId><artifactId>tomcat7-maven-plugin</artifactId><ve......
  • DispatcherServlet 是一个 Servlet 也是一个bean
    ServletDispatcherServlet实现了javax.servlet.Servlet接口,负责处理来自客户端浏览器的HTTP请求,并将请求分发给相应的Controller进行处理。DispatcherServlet通常是Web应用程序中唯一一个Servlet,并且是SpringMVC框架中最核心的组件之一。SpringBoot启动时会初始化Tomcat容器......