VUE - axios Post 不工作答案

【问题标题】：VUE - axios Post not workingVUE - axios Post 不工作
【发布时间】：2018-12-24 21:39:47
【问题描述】：

我想做 VUE.JS 的 ajax 调用，这可以通过 axios 来完成。我正在从 JS 文件中进行此调用，下面是代码，到目前为止我尝试过的。

    <div id="VueCalling">    
        <div class="container">
            <label>Please enter thought </label>
        <input type="text" id="txtThought" class="form-control textboxCustm" v-model="textThought" />
        </div>
        <input type="button" class="btn btn-info" id="btnInsert" value="Insert JS" v-on:click="greet" />
        <br />
        <br />

        <a href="ReadThought.aspx" class="btn btn-primary">Read all thoughts</a>
    </div>
</asp:Content>

这是我的 HTML 代码，现在如下提到的 JS 代码。

new Vue({
    el: '#VueCalling',
    data: function () {
        return {
            textThought: null,
            checkbox: null,
            text: null,
        }
    },
    methods: {
        greet: function (event) {
            // `this` inside methods points to the Vue instance
            var passedEmail = this.textThought;
            // `event` is the native DOM event
            axios.post('Default.aspx/InsertThoughtMethod?Thought="' + passedEmail + '"',
    {
        headers: {
            'Content-type': 'text/xml; charset=\"utf-8\"'
        },
    }, function (data) {
        alert(data);
    }).then(function (response) {
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    });
        }
    }
});

这是我的方法背后的代码：

[WebMethod]
    public static bool InsertThoughtMethod(string Thought)
    {
        return true;
    }

我检查了控制台和网络日志。它给出了这个错误。 Network Log

调试器直到方法才到达。我不能再往前走了。

【问题讨论】：

greet方法执行了吗？（您可以添加控制台日志）。然后打开您的浏览器开发工具并检查是否在点击时发送了 http 帖子。并告诉我们服务器的响应。（404，跨站脚本，...）
而不是不起作用，更详细的解释会很有用。在调试 ajax 请求时，通常需要检查以下细节：请求是否首先发送，如果是，状态码是什么。如果你在控制器上设置断点，你会在那里收到请求吗？
请原谅。我已经编辑了问题并添加了更多详细信息
500 表示“内部服务器错误”。所以你的 axios POST 请求没有问题。您应该检查服务器的日志记录。
嘿@puelo .. 是的，你是对的。但问题是我在目的地保留了一个调试器，但没有到达。没有到达那里它的给予 500

标签： vue.js vuejs2 axios

【解决方案1】：

我处理了这段代码并找到了解决方案。下面的代码运行良好。我查过了。

new Vue({
el: '#VueCalling',
data: function () {
    return {
        textThought: null,
        checkbox: null,
        text: null,
    }
},
methods: {
    greet: function (event) {
        // `this` inside methods points to the Vue instance
        var passedEmail = this.textThought;

        // `event` is the native DOM event
        axios.post('Default.aspx/InsertThoughtMethod', { Thought : passedEmail }).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});
    }
}
});

【讨论】：