前端向后端传值的几种方式总结

news2025/7/7 20:51:35

一、HTML的标签form表单提交(常用)
from表单把所有属于表单中的内容提交给后台,例如输入框,单选框,多选框,文本域,文件域等。

  1. 在后台可通过对应的name属性获取相应的值。
  2. from表单中的action属性标识提交数据的地址。
  3. method属性指明表单提交的方式。

前端form表单:

在这里插入图片描述

 

后端Controller控制器:

@RequestParam 注释请求参数
@RequestParam(“name”) 定义前端的name属性

@RequestMapping("/index")
    public String index(@RequestParam("username") String username,@RequestParam("password") String password){
        System.out.println(username+"-"+password);
        return "list.html";
    }

 

 
测试请求:
http://localhost:10089/index?username=11&password=123

在这里插入图片描述 

后端成功获取前端请求的数据。

二、JQuery中的ajax提交(常用)
JavaScript中也有ajax提交,但是代码太多,所以JQuery对JS中的ajax进行了简化。引入JQuery相应的包即可使用。一般格式为:

 

$.ajax({
            url: "/index", //后端地址
            type: "post",       //提交方式
            data: {
                //向后台提交的数据
            },
            dataType: "JSON",       //规定请求成功后返回的数据
            success: function (data) {
                //请求成功之后进入该方法,data为成功后返回的数据
            },
            error: function (errorMsg) {
                //请求失败之后进入该方法,errorMsg为失败后返回的错误信息
            }
        });


总结:以上两种方式如果不显示的指定post提交方式,则默认的提交方式为get方式提交。此外,ajax中的url也可以直接通过字符串拼接,然后向后台提交数据,这种方式为get方式提交。下面详细说明

三、通过url字符串拼接向后台提交数据
1. 直接在ajax中url拼接数据

$.ajax({
            url: "/index?username="+username+"&password="+password, //后端地址(含参数)
            type: "get",       //提交方式
            dataType: "JSON",       //规定请求成功后返回的数据
            success: function (data) {
                //请求成功之后进入该方法,data为成功后返回的数据
            },
            error: function (errorMsg) {
                //请求失败之后进入该方法,errorMsg为失败后返回的错误信息
            }
        });


2. JS提交数据,通过window.location.href指定路径提交数据。

var deleteUser = function (deleteId) {
        if (confirm("确认删除编号是【"+deleteId+"】的成员吗?")){
            window.location.href="/DeleteUserServlet?deleteId="+deleteId;  //后端地址(含参数)
        }
    }


3. 通过a标签提交数据,通过a标签的href属性提交数据,和js提交数据类似。

<a href="/index?username="+username+"&password="+password"></a>


四、 后端返回前端数据
后端数据放到org.springframework.ui.model中,前端HTML就能直接在取出来

后端代码:
使用Model的addAttribute方法,将数据放到model中   

@RequestMapping("/index")
    public String index(
            @RequestParam("username") String username,
            @RequestParam("password") String password,
            //将查询到的数据通过org.springframework.ui.Model
            Model model) {
        Person person = personService.login(username, password);
        System.out.println(username + "-" + password);
        if (person != null) {
            return "list.html";
        } else {
            //将错误信息提示前端
            model.addAttribute("msg","账号密码不正确");
            return "index";
        }
    }

前端代码:
thymeleaf使用${}获取后端数据,

    <!--/*@thymesVar id="msg" type=""*/-->
    <p th:text="${msg}" style="color: red" ></p>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405946.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue踩坑--background-image路径问题

在前端开发中&#xff0c;background-image属性非常常见&#xff0c;有很多时候需要使用内联样式来绑定此属性&#xff0c;但是在vue项目中&#xff0c;如果如下面代码填写路径会找不到图片 项目中图片都放在src/img文件夹&#xff0c;img和background-image引用都用相对路径&a…

农业病虫害数据集与算法——调研整理

整理自博客 农业病虫害研究图库 陈雷&#xff1b;袁媛.农业病虫害研究图库.(V1).中国科学院合肥物质科学研究院[创建机构],2021-10-27.国家基础学科公共科学数据中心[发布机构],CSTR:16666.11.nbsdc.feoakuia;http://resolve.pid21.cn/CSTR:16666.11.nbsdc.feoakuia 下载链接&…

火狐浏览器谷歌浏览器Edge浏览器修改默认UA(User-Agent)

1.火狐浏览器&#xff08;Firefox) 1.1 使用浏览器设置进行修改 1&#xff09;在火狐浏览器地址栏输入“about:config”&#xff0c;按下回车进入设置菜单 2&#xff09;输入并找到“general.useragent.override”&#xff0c;选择”字符串“选项&#xff0c;再点击右侧的➕…

Openlayers 快速上手教程

&#x1f4e2;欢迎点赞&#x1f44d;/ 收藏⭐/ 留言&#x1f4dd;如有错误敬请指正&#xff01; 1. Openlayers简介 Openlayers 是开源的前端地图框架&#xff0c;官网地址&#xff1a;https://openlayers.org/ 它的作用主要是用于展现数据并且提供相应的地图操作工具。 1.1 …

SpringCloud 分布式微服务架构

SpringCloud 分布式架构前言SpringCloud微服务单体架构和微服务分布式架构单体架构分析微服务分布式架构分析服务拆分和远程调用服务拆分 案例需求准备远程调用初步Eureka注册中心服务注册与负载均衡服务注册Ribbon负载均衡指定负载均衡规则Nocas 注册中心环境配置启动服务注册…

vue3+动态路由

动态路由&#xff0c;也就是不是写死的路由&#xff0c;根据自己的需求加载不同的页面&#xff1b;现在很多的后台管理项目就是根据用户角色的不同分配不同的功能菜单&#xff08;页面&#xff09;&#xff1b; 根据用户登录的角色返回可以访问的页面路由&#xff0c;前端将路由…

JSON parse error: Cannot deserialize value of type `java.util.Date` from String

DateTimePicker DateTimeFormat("yyyy-MM-dd HH:mm:ss")日期格式转换异常 最近在学习,练习一个项目使用的日期格式是yyyy-MM-dd HH:mm:ss格式的,在后端Java与MySQL这边的转换中一开始格式没有统一间歇性的就会报异常,后面采用了一个DateTimeFormat("yyyy-MM-d…

vue组件的动态加载

​ 平常的vue项目开发&#xff0c;已经很难遇见一千行&#xff0c;甚至几千行代码的页面了&#xff0c;毕竟大家都会去拆分组件。但如果一个页面需要通过十几个组件或者几十个组件中的某几个组件去排列组合渲染&#xff0c;此时用动态加载就很有必要了。 ​ 我自己在开发过程中…

v-if与v-for为什么不建议一起使用?

1、作用 v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true值的时候被渲染。 v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items 形式的特殊语法&#xff0c;其中items是源数据数组或者对象&#xff0c;而item则是被迭代的数组元素的…

JS-获取DOM元素的五种方法

介绍 本文主要介绍通过JS获取DOM元素的5种方法&#xff1a; 根据id名获取元素&#xff1a;getElementById;根据标签名获取元素&#xff1a;getElementsByTagName&#xff0c;返回一个数组&#xff1b;根据类名获取元素&#xff1a;getElementsByClassName&#xff0c;返回一个…

当后端给我返回了302状态码

本文首发于&#xff1a;https://github.com/bigo-frontend/blog/ 欢迎关注、转载。 前言 前段时间接手了一个项目&#xff0c;在代码中看到了这样的一段代码&#xff1a; if (isHTML(data) &&response.request.responseURL?.indexOf(CAS_PREFIX) > -1) {window.l…

cesium简介

文章目录1.什么是Cesium&#xff1f;2.Cesium能做什么&#xff1f;3.Cesium的依赖性4.Cesium学习参考Cesium实战系列文章总目录&#xff1a; 传送门1.什么是Cesium&#xff1f; Cesium是AGI公司计算机图形开发小组与2011年研发的三维地球和地图可视化开源JavaScript库&#xf…

【微信小程序 | 实战开发】实现ES6转ES5开关

个人名片: 🐼作者简介:一名大二在校生,喜欢编程🎋 🐻‍❄️个人主页🥇:小新爱学习. 🐼个人WeChat:hmmwx53 🕊️系列专栏:🖼️ 零基础学Java——小白入门必备重识C语言——复习回顾

Java开发框架选型对比:ruoyi与yudao框架

1、基础开发框架 1.1 什么是基础开发框架&#xff1f; 基础框架可以理解为建立一个项目所需的基础框架&#xff0c;这个基础框架为凝聚了之前开发项目的通用、共性的方法、工具、技术等组成的代码包。 现有我们公司有两类基础框架&#xff1a;&#xff08;1&#xff09;基于w…

vue2使用element UI中Descriptions组件的遍历问题

需求描述&#xff1a;展示信息时其中部门区域是未知数量的&#xff0c;需要通过遍历进行展示。如下图举例&#xff0c;其中地址和备注是一一对应关系&#xff0c;需遵循该样式。 问题描述&#xff1a;起初我在el-descriptions中直接使用v-for进行遍历地址和备注两个el-descript…

实现异步的8种方式

前言异步执行对于开发者来说并不陌生&#xff0c;在实际的开发过程中&#xff0c;很多场景多会使用到异步&#xff0c;相比同步执行&#xff0c;异步可以大大缩短请求链路耗时时间&#xff0c;比如&#xff1a;「发送短信、邮件、异步更新等」&#xff0c;这些都是典型的可以通…

Switch语句用法及案例

​ 一、Switch语句用法 switch是多分支语句&#xff0c;用于判断一个表达式的值&#xff0c;然后执行相应的语句。&#xff08;可以实现多选一&#xff09; switch语句执行思路&#xff1a;利用表达式的值&#xff0c;来判断执行哪个语句。&#xff08;简单的来说就是利用我们…

Vue 3 安装及环境配置

Vue 3 安装及环境配置1、安装 Node.js2、配置默认安装目录和缓存日志目录3、配置环境变量4、配置淘宝镜像5、安装 vue 和脚手架6、安装vue-cli 3.x7、创建 vue 3 项目8、可能遇到的问题1、安装 Node.js Node.js 官网&#xff1a;https://nodejs.org/en/download 安装成功后在…

Vue项目实战——实现一个任务清单【基于 Vue3.x 全家桶(简易版)】

Vue3.x 项目实战&#xff08;一&#xff09; 内容参考链接Vue2.x全家桶Vue2.x 全家桶参考链接Vue2.x项目&#xff08;一&#xff09;Vue2.x 实现一个任务清单Vue2.x项目&#xff08;二&#xff09;Vue2.x 实现GitHub搜索案例Vue3.x项目&#xff08;三&#xff09;Vue3.x 实现一…

Vue项目部署(Nginx)

本文记录如何将做好的Vue项目部署到服务器上&#xff0c;需要准备&#xff1a; linux系统的服务器或者虚拟机Vue项目打包Nginx服务器的配置和部署1、linux系统准备 本次使用云主机作为部署主机。 2、Vue项目打包 切换到项目所在目录&#xff0c;使用 npm run build 命令完成项目…