Vue JS Ajax 调用
Posted
技术标签:
【中文标题】Vue JS Ajax 调用【英文标题】：Vue JS Ajax Calls 【发布时间】：2020-03-25 20:33:41 【问题描述】：我正在尝试从 jQuery 更改为 Vue.js，并且在使用 vueresource 运行 Ajax 调用时遇到了一些困难。下面是我正在使用的示例脚本，其中包含 jQuery 和 Vuejs。两者都试图访问相同的 ajax 调用。 jQuery 调用有效，vuejs 调用无效。正在调用 sendAjax 方法，因为前 2 个警报显示 - 然后什么都没有。
编辑 - 这只会在通过 Wordpress 运行 Ajax 调用时导致错误。在 WP 之外，它确实有效。有什么想法吗？？
<!DOCTYPE html>
<html>
<head>
<title>Vue Resource</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
</head>
<body>
<button id="jQueryAjax">Jquery AJAX</button>
<div id="myvue">
<button @click.prevent="sendAjax()">AJAX</button>
</div>
<script>
let AjaxUrl = "http://localhost:8888/mySite/wp-admin/admin-ajax.php";
const postData = action: 'my_ajaxcall', function: 'AjaxTest' ;
Vue.use(VueResource);
const ajax_app = new Vue(
el: '#myvue',
methods:
sendAjax()
alert("VueAjax");
alert(JSON.stringify(postData));
this.$http.post(AjaxUrl, postData).then(res =>
alert(JSON.stringify(res));
);
);
$("#jQueryAjax").click(function()
alert("jQueryAjax");
alert(JSON.stringify(postData));
alert(AjaxUrl);
$.ajax(
type: 'POST',
url: AjaxUrl,
data: postData,
dataType: 'json',
success: function(data)
alert(JSON.stringify(data));
,
error: function (xhr, ajaxOptions, thrownError)
alert("Error");
);
);
</script>
</body>
</html>
【问题讨论】：
【参考方案1】：您的 AJAX 调用可能遇到错误，您只处理成功的调用。请像这样扩展您的 sendAjax 函数：
this.$http.post(AjaxUrl, postData).then(res =>
alert(JSON.stringify(res));
, err =>
alert(err);
);
现在应该警告一个错误。
顺便说一句：最好使用console.log() 而不是alert()，它更具可读性，您不必确认每个警报。
【讨论】：
谢谢。事实上，我现在收到一个错误：状态 400 - 错误请求。这看起来像问题。 "cache-control":[ "no-store, no-cache, must-revalidate" ], - 我会研究这意味着什么...... 很高兴我能帮上忙。如果这真的有帮助，我们将不胜感激。【参考方案2】：@mbuechmann 指出我能够看到实际错误后，我能够确定我遇到的问题实际上与 Wordpress 有关。为了使用 Wordpress Ajax 处理程序，您需要向 REQUEST 标头发送一个操作。为此，您需要发送 FormData，并且不发送标头。
在这个问题中找到了这段代码：Custom Shortcode AJAX 400 Bad Request，它使我能够让我的 Fetch 与 Wordpress 一起工作。
var data = new FormData();
data.append( 'action', 'aj_ajax_demo' ); data.append( 'nonce', aj_ajax_demo.aj_demo_nonce );
fetch(aj_ajax_demo.ajax_url,
method: 'POST',
body: data, ).then(response =>
if (response.ok)
response.json().then(response =>
console.log(response);
);
);
【讨论】：
以上是关于Vue JS Ajax 调用的主要内容，如果未能解决你的问题，请参考以下文章
使用 Vue.js 以 JSON 格式返回列表的 API 的 AJAX 调用