entityMap|blocks|depth|type|unstyled|text|在WordPress中使用Vanilla+JS通过Ajax发送JSON数据，可以通过以下步骤实现：|entityRanges|inlineStyleRanges|ordered-list-item|首先，确保你已经在WordPress中加载了Vanilla+JS库。你可以在主题的functions.php文件中使用以下代码来加载：|code-block|data|language|php|function+enqueue_vanilla_js()+{ ++++wp_enqueue_script(+'vanilla-js',+'https://cdn.jsdelivr.net/npm/vanilla-js@1.0.0/dist/vanilla.min.js',+array(),+'1.0.0',+true+); } add_action(+'wp_enqueue_scripts',+'enqueue_vanilla_js'+);|这将在前端页面中加载Vanilla+JS库。|创建一个WordPress页面模板或在现有的页面模板中添加以下代码。这将创建一个包含一个按钮的页面，当点击按钮时，将通过Ajax发送JSON数据。| ++++发送JSON ++++ |在上面的代码中，我们创建了一个按钮和一个用于显示响应的div元素。当按钮被点击时，我们创建了一个包含name和email字段的JSON对象，并使用XMLHttpRequest对象发送POST请求到WordPress的admin-ajax.php文件。我们设置了请求头的Content-Type为application/json，并在请求的回调函数中处理响应。|创建一个WordPress插件或在主题的functions.php文件中添加以下代码，以处理Ajax请求并返回响应。|add_action(+'wp_ajax_send_json',+'send_json_callback'+); add_action(+'wp_ajax_nopriv_send_json',+'send_json_callback'+); function+send_json_callback()+{ ++++$data+=+json_decode(+file_get_contents(+'php://input'+),+true+); ++++//+处理接收到的JSON数据 ++++$name+=+$data['name']; ++++$email+=+$data['email']; ++++//+进行其他处理，例如将数据保存到数据库 ++++//+返回响应 ++++$response+=+array( ++++++++'message'+=>+'JSON数据已成功接收并处理。' ++++); ++++wp_send_json(+$response+); }|在上面的代码中，我们使用了wp_ajax_send_json和wp_ajax_nopriv_send_json动作钩子来处理Ajax请求。send_json_callback函数用于处理接收到的JSON数据，并返回一个包含成功消息的响应。|offset|length|style|CODE|现在，当你访问使用了上述页面模板的WordPress页面时，你将看到一个按钮。当你点击按钮时，通过Ajax发送JSON数据，并在页面上显示响应消息。|这是一个使用Vanilla+JS在WordPress中通过Ajax发送JSON数据的示例。请注意，这只是一个基本示例，你可以根据自己的需求进行修改和扩展。^0|0|0|0|0|0|0|0|0|0|D|H|V|O|1X|I|0|0^^$0|$]|1|@$2|T|3|4|5|6|7|@]|8|@]]|$2|U|3|9|5|A|8|@]|7|@]]|$2|V|3|B|C|$D|E]|5|F|7|@]|8|@]]|$2|W|3|4|5|G|7|@]|8|@]]|$2|X|3|9|5|H|8|@]|7|@]]|$2|Y|3|B|C|$D|E]|5|I|7|@]|8|@]]|$2|Z|3|4|5|J|7|@]|8|@]]|$2|10|3|9|5|K|8|@]|7|@]]|$2|11|3|B|C|$D|E]|5|L|7|@]|8|@]]|$2|12|3|4|5|M|7|@]|8|@$N|13|O|14|P|Q]|$N|15|O|16|P|Q]|$N|17|O|18|P|Q]]]|$2|19|3|4|5|R|7|@]|8|@]]|$2|1A|3|4|5|S|7|@]|8|@]]]]

ServerlessDays · China Online

WeGeek微信小程序敏捷开发实战（上海站）

国产数据库硬核技术之TDSQL-A技术详解

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐