
已经测试成功,如果还有问题,可以花钱适配
价钱你们开,主要看眼缘
前端代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>域名TDK查询工具</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <style> /* 简单美化样式,提升交互体验 */ .container { max-width: 800px; margin: 50px auto; padding: 20px; font-family: "Microsoft Yahei", sans-serif; } .input-group { margin-bottom: 20px; } label { display: block; margin-bottom: 8px; font-weight: bold; color: #333; } input[type="text"], textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; box-sizing: border-box; } textarea { height: 100px; resize: vertical; } button { padding: 10px 30px; background-color: #007bff; color: white; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; } button:disabled { background-color: #6c757d; cursor: not-allowed; } button:hover:not(:disabled) { background-color: #0056b3; } </style> </head> <body> <div> <h2>域名TDK信息查询</h2> <!-- 域名输入框 --> <div> <label for="domain">请输入要查询的域名(如:www.baidu.com):</label> <input type="text" id="domain" placeholder="例:www.taobao.com"> </div> <!-- 查询按钮 --> <div> <button id="tdkBtn" onclick="tdkhq()">查询TDK</button> </div> <!-- TDK结果展示区域 --> <div> <label for="name">标题(Title):</label> <input type="text" id="name" readonly placeholder="查询结果将显示在这里"> </div> <div> <label for="gjz">关键词(Keywords):</label> <input type="text" id="gjz" readonly placeholder="查询结果将显示在这里"> </div> <div> <label for="introduce">描述(Description):</label> <textarea id="introduce" readonly placeholder="查询结果将显示在这里"></textarea> </div> </div> <script> // TDK查询核心函数 function tdkhq() { // 1. 获取并清洗用户输入的域名 var domain = $("#domain").val().trim(); if (!domain) { alert("请输入有效的域名!"); return; } // 2. 处理按钮状态(防止重复点击) var $btn = $("#tdkBtn"); // 直接通过ID获取按钮,更精准 $btn.text("查询中...").prop("disabled", true); // 3. 发起AJAX请求 $.ajax({ type: "GET", dataType: "json", url: "tdk_proxy.php", // 后端接口地址 data: { url: domain }, timeout: 15000, // 15秒超时 success: function (result) { if (result.code === 200) { // 填充TDK数据到对应输入框 $("#name").val(result.title || ""); $("#gjz").val(result.keywords || "【该网站未配置关键词标签】"); $("#introduce").val(result.description || ""); alert("TDK查询成功!"); } else { alert("查询失败:" + (result.msg || "未知错误")); } }, error: function (xhr, status, error) { // 区分不同的错误类型,提示更友好 var errorMsg = ""; if (status === "timeout") { errorMsg = "请求超时(15秒),请检查网络或稍后重试"; } else if (status === "error") { errorMsg = "网络错误,无法连接到服务器"; } else { errorMsg = "请求失败:" + status + " - " + error; } alert(errorMsg); }, complete: function () { // 无论成功/失败,恢复按钮状态 $btn.text("查询TDK").prop("disabled", false); } }); } </script> </body> </html>这个直接放在apply.php文件里面即可,
接口文件包更新,如果不能获取后,可以联系我给你更新即可
测试接口代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TDK查询修复版</title>
<!-- 1. 优先引入jQuery(必须在自定义脚本前,用稳定CDN) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
</head>
<body>
<!-- 测试用DOM结构(确保ID和JS中一致) -->
域名:<input type="text" id="domain" placeholder="输入域名,如www.baidu.com" value="www.baidu.com"><br>
标题:<input type="text" id="name" placeholder="标题"><br>
关键词:<input type="text" id="gjz" placeholder="关键词"><br>
描述:<textarea id="introduce" placeholder="描述"></textarea><br>
<button onclick="tdkhq()">查询TDK</button>
<script>
// 修复后的TDK查询函数
function tdkhq() {
// 修复点1:严格验证输入(避免空值/非法字符导致请求异常)
var domain = $("#domain").val().trim();
if (!domain) {
alert("请输入有效的域名!");
return;
}
// 修复点2:AJAX核心配置(适配后端代理的GET请求+参数格式)
$.ajax({
type: "GET", // 后端代理是GET请求(原POST会导致参数接收失败)
dataType: "json", // 明确接收JSON格式
url: "tdk_proxy.php", // 确认:代理文件和当前HTML同目录(路径错误是高频问题)
data: { // 用data传参(避免手动拼接URL导致的编码/格式错误)
url: domain
},
timeout: 10000, // 新增:超时保护(避免网络慢导致无响应)
// 修复点3:完善的成功回调(增加容错,避免字段不存在导致报错)
success: function (result) {
// 先验证返回结果是否合法
if (!result) {
alert("接口返回空数据!");
return;
}
// 匹配后端返回的code=200逻辑
if (result.code === 200) {
$("#name").val(result.title || ""); // 标题(空值兜底)
$("#gjz").val(result.keywords || ""); // 关键词(空值兜底)
$("#introduce").val(result.description || ""); // 描述(空值兜底)
} else {
alert("查询失败:" + (result.msg || "未知错误"));
}
},
// 修复点4:精准的错误回调(定位前端问题类型)
error: function (xhr, status, error) {
var errMsg = "";
switch (status) {
case "timeout": errMsg = "请求超时,请重试!"; break;
case "error": errMsg = "请求错误:" + error; break;
case "abort": errMsg = "请求被中断!"; break;
case "parsererror": errMsg = "接口返回非JSON格式(后端可能报错)!"; break;
default: errMsg = "未知错误:" + status;
}
alert(errMsg);
// 控制台打印详细信息(便于调试)
console.log("AJAX错误详情:", {
xhr_status: xhr.status, // HTTP状态码
status: status, // 错误类型
error: error, // 错误描述
response: xhr.responseText // 后端原始返回内容
});
}
});
}
</script>
</body>
</html>
欢迎大家使用支持