vue.js - VUE - axios Post 不工作
问题描述
我想做可以由 axios 完成的 VUE.JS 的 ajax 调用。我正在从 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;
}
我检查了控制台和网络日志。它给出了这个错误。 网络日志
调试器直到方法才到达。我不能再进一步了。
解决方案
我处理了这段代码并找到了解决方案。下面的代码运行良好。我检查了。
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);
});
}
}
});
推荐阅读
- python - 如何使用 tkinter 在我的 python 脚本中调用 tcl 命令?
- c# - 在 c# 中检查是否存在带有 json 响应正文的属性值
- linux - 每次集群启动时运行 SQL
- reinforcement-learning - 双深度 Q 学习中的 Q 值过冲
- leaflet - 使用传单在屏幕上有多个地图,想将其修复为单个
- laravel - 无法打开流或文件“/Applications/XAMPP/xamppfiles/htdocs/apcjobs/storage/logs/laravel-2020-06-06.log”:
- java - 为什么我的自定义 JPanel 没有被绘制/重新绘制,即使我正在从事件队列中绘制并覆盖 paintComponent()?
- flutter - 使用 Flutter 将图像拖到另一个图像之上
- c - 无效指针值在功能更改时不会更改
- image - 显示存储在 laravel storage/app/protected/images 中的图像但返回 404