【发布时间】：2021-01-13 11:08:32
【问题描述】：
我不是程序员，所以尽管搜索了网络，但我遇到了麻烦。
我正在使用插入到 WordPress 中的 JS 脚本，通过它我进入一个域并返回一些数据。
脚本调用外部 PHP 文件。
但是，当我单击表单按钮时，它会返回一个 HTML 字符串，其中包含先前输入的输入字段的值，而不是它从 PHP 文件处理的 DATA 值，而是字符串 [object Object]。
这是 HTML：
<div class="divtoolg">
<form id="form">
<div class="form-group">
<input class="form-control" type="text" id="domain" required placeholder="Enter Input">
</div>
<div class="form-group">
<button class="btn btn-danger btn-block">
Get Data
</button>
</div>
<div id="result"></div>
</form>
</div>
这是脚本：
/*jshint esversion: 6 */
let $ = jQuery;
$(document).ready(function(){
$("#form").submit(function(e){
e.preventDefault();
$("#result").html("");
var domain = $("#domain").val();
console.log(domain);
$.ajax({
metod: 'POST',
url:'process.php',
data:{domain:domain},
async: true,
complete:function (data) {
console.log("data ="+data);
$("#result").html(`<h2>The ${domain} is ${data} old </h2>`);
$("#domain").val(domain);
},
error:function () {
$("#domain").val("");
$("#result").html("Error!");
}
});
});
});
这是 PHP 文件：
<?php
if(isset($_POST['domain']))
{
require('Ageclass.php');
$w=new DomainAge();
echo $w->age($_POST['domain']);
}
?>
有人有什么想法吗？ 非常感谢。
新的 JS
/*jshint esversion: 6 */
let $ = jQuery;
$(document).ready(function(){
$("#form").submit(function(e){
e.preventDefault();
$("#result").html("");
var domain = $("#domain").val();
console.log(domain);
$.ajax({
method: 'POST',
url:'../process.php',
data:{domain:domain},
success:function (data) {
console.log(data);
$("#result").html(`<h2>The ${domain} is ${data} old </h2>`);
$("#domain").val("");
},
error:function () {
$("#domain").val("");
$("#result").html("Error!");
}
});
});
});
【问题讨论】：
-
data很可能是一个数组或对象，而不是字符串。浏览器不知道您希望如何显示它，因此它只是显示 [Object object]。这是一个提示，您需要先处理数据，然后从中提取您在屏幕上实际需要的信息。当您将data登录到控制台时，它向您显示了什么？附言尝试不带 data= 部分的console.log(data);。 -
你好，谢谢。所以，
console.log(data)是一样的。 -
你用哪个浏览器来测试这个？在大多数现代浏览器中，它允许您在控制台中展开对象。如果没有，请尝试
console.log(JSON.stringify(data));以获取 JSON 格式的可视化表示。 （有关更多日志记录选项，另请参阅this question。）尝试查看它的另一种方法是查看开发人员工具中的“网络选项卡”，找到对 process.php 的请求，打开它并查看“响应”选项卡为那个请求。 -
因此，在控制台中返回：“{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, ...}”。在“网络”选项卡上，该文件存在 200 OK 响应，但这里的请求方法是 GET?!?!?
-
哦...我刚刚注意到您出于某种原因正在使用“完成”回调。根据文档查看它返回的内容：api.jquery.com/jquery.ajax。如果您只想获取返回的实际数据，而不是整个内部 XHR 对象（具有 HTTP 请求和响应的完整详细信息），请使用“成功”回调。即用
success(data) {替换complete(data) {- 再次检查文档。而且，几乎所有你见过的 jQuery ajax 教程都会使用“success”（除非他们使用类似 Promise 的回调），你永远不会看到使用“complete”。