WordPress开发日志：利用Ajax添加文章页自动推送并显示推送结果
WordPress开发日志：利用Ajax添加文章页自动推送并显示推送结果
百度于2020年12月12日发送了一则令人叹息的消息提醒：普通收录工具-自动推送入口下线。已经快要一年了，这个工具也没有再次上线。虽然push.js仍然能够访问，但是接口早已关闭，所以已经没什么用。为了再次重现这个功能，并且在前端显示文章是否收录，推送成功，推送失败，我决定利用已有知识，重写自动推送功能，实现访问文章即可自动推送文章到百度站长。
百度自动推送下线
在此之前，我想起了百度站长曾经还有闭站保护功能，不过也是下线，再也没有上线，所以百度的自动推送功能也应该不会再上线。文章最后将会附上本文的源码，有需要的小伙伴可以根据自己网站的情况进行修改。
开发日志
UI设计
首先我们需要设置一个较为好看的展示UI，这里以我的站点为例：
推送成功UI展示
百度已收录UI展示
为了更好地展示，我这里截图就截大一点。
我们需要做的是下面的3个设计，详细列出来方便各位读者阅读：
未收录 | 显示未收录，正在推送，推送后返回是否推送成功，并且显示推送加载图 |
|---|---|
已收录 | 显示百度已收录，并且不进行操作 |
UI | 百度LOGO，Loading GIf，文字回显 |
API设计
为了维护方便，建议写两个PHP API，一个用来检测收录，一个用来推送：
Check_record.php | 自定义BD_Curl获取记录并返回对应的JSON |
|---|---|
push_baidu.php | 官方提供的PHP例子+JSON返回 |
现在网络上大多数的check_record（检测百度是否收录）大部分已经失效，我们这里自定义一个BD_Curl来获取记录值，对于本地和服务器均有效。为了更直观的展示BD_Curl函数，我单独将它放到了baidu_check.php文件，需要的时候直接include方便程序的编写。
YUN API
Baidu_check
<?php返回查询后的原文本，不会触发百度验证码机制，避免后续的检测收录误判。
Check_record
<?php显示JSON格式的字符串，便于后续通过Ajax请求获取返回值，达到修改前端页面的效果
{参数 | 说明 |
|---|---|
code | 状态 |
url | 传入的url |
is_shoulu | 返回是否收录 |
Push_baidu
<?php同样也显示JSON字符串，便于后续的Ajax请求，以下是该PHP显示的JSON：
{参数 | 说明 |
|---|---|
code | 1为收录，0没有收录 |
url | 传入的url |
同样地，你也可以选择使用file_get_contents()函数来获取查询是否收录，不过我并不推荐选择使用这种办法。
完成API后，我们的工作基本上就完成一大半了，接下来我们开始处理前端的JS文件。
前端JS编写
JS文件需要实现以下功能：
- 动态修改文本状态
- 动态修改图片
- Ajax请求
冻手，写起来！
JS选择器
在这个操作之前，我们需要先了解JS的选择器： jQuery DOM
择选择器
这里我们为了方便，引入jQuery.js，方便选择元素和Ajax请求。
我推荐使用document.getElementById和$("id")通过标签的id来获取标签，获取到后，我们就可以修改标签内的属性，例如src、style等等。
例如下面这个例子：
<p id="id03">Hello Shanghai!</p>运行代码后，显示：
代码运行
如果你有一定的编程基础，理解还是很容易的，实在不懂的话，可以到W3 School学习学习
W3 School
Ajax请求
前端想要实现本章的查询效果，就需要ajax请求，所以在编写之前，我们需要先来了解一下Ajax请求。
参数 | 描述 |
|---|---|
type | POST,GET等方法，默认一般为Get |
url | 必需。规定把请求发送到哪个 URL。 |
data | 可选。映射或字符串值。规定连同请求发送到服务器的数据。 |
success(data, textStatus, jqXHR) | 可选。请求成功时执行的回调函数。 |
dataType | 可选。规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）。 |
例如下面一个简单的例子：
<head>
GIF
了解完基础的Ajax后，我们就可以开始编写JS文件。
动态修改文本状态
我们需要挑选需要的标签，例如本站的my_a （<a>标签）和 my_gif (<img>标签)，并编写对应的js函数：
document.getElementById("my_a").innerHTML = "Text";动态修改图片
function change_to_loading(){Ajax请求
编写ajax请求，这部分相对来说也就比较简单了，我这里就举几个例子：
- url：请求API接口路径
- data：传入的URL数据
- cache：是否缓存
- async：是否同步
- success：成功回传
- dataType：数据类型，默认自动选择
function su_ajax(message){效果展示
腾讯云开发者
