vue 使用axios 发送表单数据

最新推荐文章于 2023-07-23 15:48:51 发布
最新推荐文章于 2023-07-23 15:48:51 发布
阅读量180 收藏 1
点赞数
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/nns4/p/6955603.html
版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>     //引入 vue 和axios

<body>

<form action="" id="form">

<label for="">账号<input v-model="login.zh" type="text" name="" id="" value="" /> </label>     //双向绑定数据zh
<label for="">密码<input v-model="login.mm" type="password" name="" id="" value="" /></label>       //双向绑定数据mm

<input v-on:click="dj" type="button" value="提交" />    //添加 click事件
</form>

<script type="text/javascript">
new Vue({
el: '#form',
data: {
login:{mm: '',
zh: ""}
},
methods: {
dj: function() {

 


console.log(this.login)      返回的是一个包含很多内容东西的对象 里边还有不想要的东西
var obj=JSON.stringify(this.login)   JSON.stringify（）JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。 为了清除不想要的东西
console.log(obj)
axios.post('/user',obj)
.then(function() {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
}

}
})
</script>

</body>

</html>

--------------

总结

axios 发送数据 的方法

get 方法

axios.get('/user?ID=12345')

  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
 
post 方法
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

 

转载于:https://www.cnblogs.com/nns4/p/6955603.html

weixin_30502157
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue axios 中提交表单数据(含上传文件)
08-30
在 Vue 中，使用 axios 库来提交表单数据是一种常见的做法，尤其是在上传文件时。下面我们将详细探讨如何使用 axios 在 Vue 中提交表单数据，包括上传文件。 什么是表单提交？ 在 Web 开发中，表单提交是指将用户...
vue入门（二） 让axios发送表单形式数据
weixin_30539625的博客
12-06 175
(一) 使用 axios vue-axios qs 1.qs是必不可少的插件 npm install --save axios vue-axios qs 2.安装完成后，在main.js插入以下代码 //载入axiosimport Qs from 'qs'import axios from 'axios'import VueAxios from 'vue-axios'var ...
Vue+axios使用FormData方式向后端发送数据
最新发布
m0_50281408的博客
07-23 6946
在前后端分离的项目中经常使用到Vue+axios通过FormData的方式向后端(Java)发送表单数据(文字+图片)，但是在初次写这个功能时，可能会遇到很多问题，本文详细的记录了该功能的实现。将前端发送的数据名称和后端修改一致。
vue数据交互axios
weiweiweb888的博客
11-19 4614
axios axios简介 网址 ：http://axios-js.com/docs/index.html axios是基于Promise的http库，支持浏览器端和node端。 axios特点 从浏览器 端创建XMLHttprequests 从node端创建http 请求 支持Promise api 接受请求和响应 数据在请求和响应 之间产生 取消请求拦截 自动转换json数据 通过客户端可以防御XSRF攻击 安装及配置 npm npm i axios -S 或者 npm i axios --
Vue3教程之如何使用Axios发送HTTP请求
码奴一只猿
04-18 4028
Axios是一个流行的JavaScript库，用于在浏览器和Node.js中发送HTTP请求。在Vue3应用程序中，您可以使用Axios轻松地发送和接收数据。在本文中，我们将介绍如何在Vue3应用程序中使用Axios发送HTTP请求。
Vue中axios 表单POST提交
二十一克阳光！的博客
01-24 1万+
刚开始使用Vue，里面的坑是一个接一个，今天就遇到一个axios POST传参的问题。 因为后端要求是按表单提交的形式给他数据， 我需要在请求中传递参数，然后按官方文档的格式开始操作，代码如下： axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .ca
Vue使用axios出现options请求方法
10-16
在Vue项目中，我们经常使用axios库来进行HTTP请求。然而，有时在进行跨域请求时，浏览器会先发送一个预检请求（OPTIONS请求），这是由于CORS（Cross-Origin Resource Sharing，跨源资源共享）机制的规定。当请求的...
解决在Vue中使用axios用form表单出现的问题
10-16
当在Vue中使用axios提交form表单数据时，若希望保持与传统表单一致的编码方式，可以采取以下两种解决方法： **方法一：后端适配** 1. 在Vue组件中，axios发送POST请求的代码可能如下： ```javascript this.$...
使用axios请求时,发送formData请求的示例
10-16
本篇文章将详细讲解如何使用`axios`来发送`FormData`请求。 `FormData`是一种特殊的JavaScript对象，它允许我们构建键值对，以模拟HTML表单提交的数据格式。这对于上传文件或发送包含多个部分的数据尤其有用。下面...
Vue使用axios提交表单数据
读万卷书，行万里路
05-30 1753
html代码 <html> <head> <title>Vue提交表单数据</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <style type="text/cs
Vue安装并使用axios发送请求
见证自己学习,成长的记录
11-20 4819
本文主要介绍的是使用在Vue项目中安装并使用axios发送请求axios是一种Web数据交互方式它是一个基于promise的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)本质是对原生XHRXMLHttpRequest)进行封装，只不过它是Promise的实现版本，符合最新的ES规范，相比于JQuery，它体积更小，只有前者的四分之一左右，并且axios支持拦截器和各种请求。
vue中使用axios发送请求
所行皆坦途
07-30 4571
vue中 axios请求原理、用法、图片代码解析，async \await 配合使用、解构 data 并重命名
vue使用推荐的axios封装发送表单数据
qq_33790251的博客
12-17 477
项目开始都是默认的json格式传输 后端加了权限认证(security)之后过滤器只能接收表单数据 做不到像控制器一般灵活，所以在前端vue的使用中必须能够切换为表单传输 但是我将头headers换位了表单格式 后端却还是接收不到 原因是没有序列化 没有序列化的参数体看下图 会有一个花括号像json格式一样 但是其实也是表单 只是没有序列化 只有序列化之后后端才能接收到请求...
关于vue中利用axios常用的表单提交以及文件上传如何传递参数给后端的详解
qq_42166078的博客
08-16 1万+
前言 看到好多vue初学者还不会调用接口包括参数的传递，这里做一个详细的介绍以供各位初学者参考。 目录前言一、Axios二、安装三、引入四、示例1.表单提交 一、Axios Axios 是一个基于 promise 的易用、简洁且高效的http库。 特性 支持node端和浏览器端：同样的API，node和浏览器全支持，平台切换无压力 支持Promise：使用Promise管理异步，告别传统callback方式 丰富的配置项：支持拦截器等高级配置 拦截请求和响应，转换请求数据和响应数据，自动转换 JSON
vue axios 使用表单形式进行数据提交
Vintage
12-20 2965
        axios 默认使用的是json字符串形式去提交数据，但后端极力要求使用表单形式提交数据(说是json字符串还需要转，会消耗性能)。        由于需要使用表单的数据形式，在前端的项目里面，则需要对数据进行转换，使之成为后端能够接收的表单数据。        为了方便对请求进行控制，我将axios进行了封装，方便请求（响应）的拦截，这里就只贴部分代码。        首先...
利用Axios-vue来向后端发送数据并接受响应
Charles
07-26 1万+
axios 是一个用于浏览器与服务端发送请求的框架，它本身具有以下特征携带数据发送请求与接收服务器的请求功能. 基本使用方式（举例）： axios.post(‘路径‘, 参数).then(function (response) { alert(response.data) }) 路径: servlet访问路径 参数: 浏览器携带数据 response.data : 浏览器...
Vue通过axios向后端提交数据
wbl320的博客
12-11 1239
首先Vue是不支持Ajax的，所以得依靠axios插件提交。 在Vue之前引入axios文件： <script src="/static/source/static/element/axios.min.js"></script> <script src="/static/source/static/element/vue.js"></script&gt...
关于vue使用axios post发送json数据跨域请求403的解决方法
春虫虫丶丶丶的博客
08-17 10万+
最近使用vue框架开发项目的时候， 遇到了一个问题，其实这个问题在之前就已经遇到过，不过因为当时没有时间，所以采用了另外一种方法解决。今天再次遇到这个问题，就铁了心解决，在网上找到很多资料，经过尝试都没有能够很好解决，经过自己的一番折腾终于将这个问题解决。 原文已更新，请耐心往下看哦！ 1. 问题 vue开发的时候，使用axios跨域发送请求，同时post发送的数据格式是json格式，发送出...
axios用post提交的数据格式
热门推荐
Wopelo的博客
12-12 17万+
vue框架推荐使用axios来发送ajax请求，之前我还写过一篇博客来讲解如何在vue组件中使用axios。但之前做着玩用的都是get请求，现在我自己搭博客时使用了post方法，结果发现后台（node.js）完全拿不到前台传来的参数。后来进过一番探索，终于发现问题所在。 post提交数据的四种编码方式 1.application/x-www-form-urlencoded 这应该是最常见...
vue2中怎么使用axios提价表单数据
05-12
5. 当用户提交表单时，调用`onSubmit`方法发送POST请求，将表单数据作为第二个参数传递给`axios.post`方法。 注意：如果您使用了表单文件上传，则需要使用`FormData`对象来处理表单数据。您可以使用以下代码： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值