axiox的post参数提交
axios.post默认是application/json方式提交数据，不是表单
ajax中的post默认是表单的方式提交
psot表单方式提交 application/x-www-form-urlencoded 采用&拼接
下面这个代码是修改axios post的提交方式为表单的方式
axios.post方法 默认发送数据格式
application/json的方式发送的
{"name":"david","age":30}
axion({
url:"地址",
method:"post",
data:{
name:"david",
age:30
},
transformRequest: [function (data) {
// Do whatever you want to transform the data
let ret = ''
for (let it in data) {
// 如果要发送中文 编码
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type':'application/x-www-form-urlencoded'
}
})
发送的数据就是跟表单一样
application/x-www-form-urlencoded
name=david&age=30
在node中 处理
// application/json
// 提交复杂的大数据
// 订单数据 购物车的数据提交 比较复杂
// JSON.parse(params);
//console.log(params);
// 表单的固定格式
// applicaton/x-www-form-urlencoded
// 提交小的数据 用户信息
//var querystring = require("querystring");
//querystring.parse(params);
axios.get /axios.post 案例
<template>
<div id="app">
<h1>用户登录</h1>
<form>
<input type="text" id="name" placeholder="用户名"><br>
<input type="password" id="password" placeholder="密码"><br>
<input type="submit" @click.prevent="loginUser" value="提交">
</form>
<hr>
<h2>用户注册</h2>
<user-info></user-info>
</div>
</template>
<script>
import axios from "axios";
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
components:{
"user-info":{
data(){
return {
name:"",
password:"",
email:""
}
},
template:`
<form >
<input type="text" v-model="name" placeholder="用户名"><br>
<input type="password" v-model="password" placeholder="密码"><br>
<input type="email" v-model="email" placeholder="邮箱"><br>
<input type="submit" @click.prevent="registUser" value="提交">
</form>`,
methods:{
registUser(){
//注册用户信息
var self = this;
// 默认是applicatino/json方式提交数据 不是表单
// 下面这个代码是修改post的提交方式为表单的方式
/*
axios.post方法 默认发送数据格式
application/json的方式发送的
{"name":"david","age":30}
axion({
url:"地址",
method:"post",
data:{
name:"david",
age:30
},
transformRequest: [function (data) {
// Do whatever you want to transform the data
let ret = ''
for (let it in data) {
// 如果要发送中文 编码
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type':'application/x-www-form-urlencoded'
}
})
发送的数据就是跟表单一样
application/x-www-form-urlencoded
name=david&age=30
*/
axios(
{
url:'http://localhost:8000/myRegist',
method:"post",
data:{
name:self.name,
password:self.password,
email:self.email
},
//将JSON对象 转 键=值&键=值
/*
{
name:"david",
age:30
}
name=小李&age=30
// 在发送数据之前 将对象转键值对
*/
transformRequest: [function (data) {
// Do whatever you want to transform the data
let ret = ''
for (let it in data) {
// 如果要发送中文 编码
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type':'application/x-www-form-urlencoded'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}
}
},
methods:{
loginUser(){
// 发送数据给服务器
//http://localhost:8000/myLogin?name=david&password=123
/*
localhost/:1 XMLHttpRequest cannot load http://localhost:8000/myLogin?name=wang&password=dfasf. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
*/
console.log("发送数据");
var name = document.getElementById("name").value;
var password = document.getElementById("password").value;
var path = "http://192.168.104.31:8000/myLogin";
axios.get(path,{
params:{
name,
password
}
}).then(function(data){
// 验证成功和失败 怎么知道成功了还是失败了
console.log(data);
if(data.data.code==0){
alert("登录成功");
}else {
alert("登录失败");
}
},function(err) {
console.log(err);
}).catch(function(err){
console.log("捕获错误");
})
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
