首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何通过JS提取将数据发送到?

如何通过JS提取将数据发送到?
EN

WordPress Development用户
提问于 2021-01-25 00:14:54
回答 2查看 5.5K关注 0票数 8

我正试图在我的网站上实现过滤系统。我决定通过js来做。我创建了提取函数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let filters = document.querySelectorAll('.filters-item');
let pageUrl = wp.page_url;
const postsContainer = document.querySelectorAll('.column.is-half.is-offset-1');
filters.forEach( (item) => {
        item.addEventListener('change', (e) =>{
            let url = pageUrl + '/wp-admin/admin-ajax.php';

            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'text/html; charset=UTF-8',
                },
                body: JSON.stringify({
                    'test': "sampledatatest",
                })
            }).then( function (response) {
                if(response.ok) {
                    return response.json();
                }
                return Promise.reject(response);
            }).then(function (data) {
                console.log(data);
            }).catch(function (error) {
                console.warn('Error', error);
            });
        });
    });

在我的functions.php文件中,我有一个简单的函数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
add_action('wp_ajax_myfilter', 'misha_filter_function'); // wp_ajax_{ACTION HERE}
add_action('wp_ajax_nopriv_myfilter', 'misha_filter_function');

function misha_filter_function(){
    $t = $_POST['test'];
    echo $t;

    die();
}

当我单击filter项时,我的开发控制台中出现了错误400。我遗漏了什么?像我一样以表格的形式传递数据是正确的吗?我不想使用jQuery。

EN

回答 2

WordPress Development用户

回答已采纳

发布于 2021-01-25 01:54:32

像我一样以表格的形式传递数据是正确的吗?

如果您是指(您的body调用的)部分,那么是的,没关系。

然而,

  1. You必须发送一个名为 action的查询,作为请求的一部分(例如通过example.com/wp-admin/admin-ajax.php?action=test之类的URL ),以便WordPress知道它是什么AJAX操作,然后对该特定操作执行回调(S)。有关更多信息,请参见这里,但在您的示例中,AJAX操作与wp_ajax_myfilter中的AJAX操作相同,回调是misha_filter_function()
  2. Content-Type头与请求体不匹配,您应该使用application/json而不是text/html

但是,即使有了正确的请求主体和标题,admin-ajax.php实际上也不支持JSON请求,因此如果您想发送JSON请求,那么您应该使用WordPress REST,并且您可能希望使用添加一个自定义端点,如my-plugin/v1/myfilter

否则,如果您更喜欢使用admin-ajax.php,那么可以使用FormData()JavaScript中的API正确地构建要发送给admin-ajax.php的表单数据:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var formData = new FormData();

formData.append( 'action', 'myfilter' );
formData.append( 'test', 'foo bar baz' );

fetch( url, {
    method: 'POST',
    body: formData,
} ) // wrapped
    .then( res => res.text() )
    .then( data => console.log( data ) )
    .catch( err => console.log( err ) );
票数 15
EN

WordPress Development用户

发布于 2022-12-25 23:00:05

我认为下面是通过javascript启动ajax请求的最方便的方法。在不使用WordPress的情况下创建jQuery ajax请求。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// PHP WP ajax hook
add_action('wp_ajax_ajaxCallback', 'ajaxCallback'); 
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//  Creating data 
let requestData = {
    action: "ajaxCallback",
    myData: "Your data",
    nonce: 'test nonce'
};
    
// Initiating AJAX request 
fetch('http://example.com/wp-admin/admin-ajax.php', {
    method:"post",
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams(requestData).toString(),
}).then(function(response) {
    // return response.json(); // if responce is in json.
    return response.text();
}).then(function(response) {
    console.log(response);
});
票数 1
EN
页面原文内容由WordPress Development提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://wordpress.stackexchange.com/questions/382129

复制
相关文章
如何通过 LlamaIndex 将数据导入 Elasticsearch
本文将介绍如何使用 LlamaIndex 将数据索引到 Elasticsearch 中,以实现 FAQ 搜索引擎。Elasticsearch 将作为我们的向量数据库,支持向量搜索,而 RAG(检索增强生成)将丰富搜索上下文,提供更准确的响应。
点火三周
2025/03/05
540
如何通过 LlamaIndex 将数据导入 Elasticsearch
将CSV的数据发送到kafka(java版)
前面的图可以看出,读取CSV再发送消息到kafka的操作是Java应用所为,因此今天的主要工作就是开发这个Java应用,并验证;
程序员欣宸
2021/04/16
3.5K0
将CSV的数据发送到kafka(java版)
如何将Flink应用的日志发送到kafka
产线环境上的Flink应用是长时运行的应用,日志量较大,通过flink web页面查看任务日志会导致浏览器卡死,通过日志排查问题非常不便。因此,需要将flink应用的日志发送到外部系统,方便进行日志检索
Eights
2020/09/10
2.3K0
如何将Flink应用的日志发送到kafka
python web应用_如何使用Python将通知发送到Web应用
如何使用Python将通知发送到Web应用 (How to send notifications to your Web App using Python)
用户7886150
2021/01/01
2.5K0
如何从网站提取数据?
在当今时代,根据数据情况来制定业务决策是许多公司的头等大事。为了推动这些决策,公司全天候跟踪,监视和记录相关数据。幸运的是,很多网站的服务器上存储了大量公共数据,可以帮助企业在竞争激烈的市场中保持领先地位。
用户7850017
2021/01/29
3.1K0
如何通过Python将CSV文件导入MySQL数据库?
1、通过SQL的insert方法一条一条导入,适合数据量小的CSV文件,这里不做赘述。
朱卫军 AI Python
2022/04/02
9.4K0
如何通过Python将CSV文件导入MySQL数据库?
如何将消息按指定时间发送到钉钉群里
根据项目组需求,组员每天都要写工作日报,但有时候忙起来,就忘记写日报这个事了,所以就需要一个通知消息来定点通知大家写日报。
wangmcn
2022/07/26
3K0
如何将消息按指定时间发送到钉钉群里
如何通过js将一base64编码的图片显示在html中
今天遇到了一个小问题,如何通过js将一base64编码的图片显示在html中?写了一个小的demo.
王小婷
2019/06/14
11.2K0
js 将数据保存到本地
name 文件名 data 数据 type mime类型 saveAs: function (name, data, type) { const element = document.createElementNS("http://www.w3.org/1999/xhtml", "a"), ev = document.createEvent("MouseEvents"), urlObject = window.URL || window.webkitURL || wi
路过君
2020/08/28
6.4K0
如何将json数据通过vuex渲染到页面上
如何将json数据通过vuex渲染到页面上 在store中导入axios import axios from 'axios' 复制代码 actions中执行异步操作,来将json数据拿到store中 actions: { getList(context) { axios.get('./list.json').then(({ data }) => { context.commit('initList', data) }) } }, 复制代码 通过m
玖柒的小窝
2021/11/06
2.6K0
通过sqoop将hdfs数据导入MySQL
简介:Sqoop是一款开源的工具,主要用于在Hadoop(Hive)与传统的数据库(mysql、postgresql...)间进行数据的传递,可以将一个关系型数据库(例如 : MySQL ,Oracle ,Postgres等)中的数据导进到Hadoop的HDFS中,也可以将HDFS的数据导进到关系型数据库中。
互联网金融打杂
2018/08/02
1.5K0
使用 iptables 将 Kubernetes Service 流量随机发送到 Pod
本文将带大家了解 Kubernetes 的 kube-proxy 组件如何使用 iptables 将 service 流量随机发送到 Pod,目的是实现 service 所需的 iptables 规则。
CNCF
2021/04/21
1.6K0
构建fluentd镜像将收集的日志发送到elasticsearch
构建脚本: version: "3" services: fluentd: build: ./fluentd volumes: - ./fluentd/conf:/fluentd/etc privileged: true ports: - "24224:24224" - "24224:24224/udp" environment: - TZ=Asia/Shanghai restart: always
johnhuster的分享
2022/03/28
5310
如何通过node.js对数据进行MD5加密
实际工作开发中,是不会有人直接将密码明文直接放到数据库当中的。因为这种做法是非常不安全的,一般都要对其进行MD5加密!比如某用户的密码是“123456“(当然这样的密码也没有安全性可言),经过MD5处理后即为:“e10adc3949ba59abbe56e057f20f883e”。这样做的好处主要有以下两点:
用户1272076
2019/03/26
3.6K0
不写一行代码,如何实现前端数据发送到邮箱?
经常在很多网站上都能看到类似的表单信息功能,用户只需要填写相关内容,点击提交按钮,就可以将表单内容发送到管理员邮箱。
刘早起
2022/09/21
5.7K1
如何打开.ziw格式文件?(附赠)win10将程序右键加到“发送到”
打开.ziw格式文件 1、如何打开? 2、发送到选项里面没有WizNote选项怎么办?
全栈程序员站长
2022/11/04
2.5K0
如何打开.ziw格式文件?(附赠)win10将程序右键加到“发送到”
如何提取列表所有层级的数据?
解释:这里使用了递归方式来进行求解。同时这里使用了一个小技巧,is type的写法,实际上这个写法是和Value.Is(值,type 类型)写法相同。递归结束条件为列表中的值不等于list格式。
逍遥之
2020/03/24
1.9K0
如何提取列表所有层级的数据?
(1)通过FlinkSQL将数据写入mysql demo
FlinkSQL的出现,极大程度上降低了Flink的编程门槛,更加容易理解和掌握使用。今天将自己的笔记分享出来,希望能帮助在这方面有需要的朋友。
NBI大数据
2022/08/08
1.7K0
(1)通过FlinkSQL将数据写入mysql demo
通过FEDOT将AutoML用于时间序列数据
大多数现代开源AutoML框架并没有广泛地涵盖时间序列预测任务。本文中我们将深入地研究AutoML框架之一FEDOT,它可以自动化时间序列预测的机器学习管道设计。因此,我们将通过时间序列预测的现实世界任务详细解释FEDOT的核心正在发生什么。
deephub
2021/07/23
8860
通过FEDOT将AutoML用于时间序列数据
如何利用CDO从数据集中提取数据
之前说了如何利用CDO查看数据集信息 使用CDO查看气象数据信息。这一次说一下利用CDO从数据集中提取数据。这部分是非常使用的,尤其是当涉及到大数据集的时候,其优势就变得非常明显了。
bugsuse
2020/04/21
8.8K0
如何利用CDO从数据集中提取数据

相似问题

将Array从JS发送到php文件,然后通过插件将其插入wp数据库

10

如何通过编程将编辑发送到我的博客?

10

如何将数据发送到侧栏?

10

在将数据发送到wpdb之前,检查数据是否存在。

10

如何将多部分表单数据发送到WordPress端点

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文