首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何通过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

复制
相关文章

相似问题

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