在vuejs中发送axios发布请求

时间:2020-01-26 14:40:27

标签: php vue.js axios

我想从vuejs中的模板发送axios发布请求,看起来像以下代码:

<script>
export default {
  data() {
    return {
      body:{
       name:'ssdsdsd',
       time:'232342',
      },
    header:{headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    }},
      name:null,
      r:null,
    }
  },
  methods: {
    post:function(){
      this.$http.post('http://127.0.0.1/saver.php',this.body,this.header).then(r => {
       this.r=r;
       // eslint-disable-next-line no-console
       console.log(typeof this.body)
      }).catch(err => {
   // eslint-disable-next-line no-console
   console.log(err.response.data)
});
    }
  },
}
</script>

并且我使用Requst方法在php代码中获得this.name(名称)

这是我的php代码:

<?php
header('Access-Control-Allow-Origin: *');
header('Content-type: application/json');
    echo($_REQUEST['name']);

?>

但是php返回了此响应:

<br />
<font size='1'><table class='xdebug-error xe-notice' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined index: name in C:\wamp64\www\saver.php on line <i>4</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0003</td><td bgcolor='#eeeeec' align='right'>401952</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='C:\wamp64\www\saver.php' bgcolor='#eeeeec'>...\saver.php<b>:</b>0</td></tr>
</table></font>

1 个答案:

答案 0 :(得分:0)

更新。

您得到Array ( [{"name":"asd"}] => ),但您应该得到这个:

Array ( ["name" => "asd"])

已更新。 2

您可以尝试从axios的标题中删除'Content-type': 'application/x-www-form-urlencoded',吗?