如何使 ajax 在 wordpress 插件中兼容

Question

我在 wordpress 中写了一个插件。它有一些.js 文件和.php 文件，我通过在jquery 中调用ajax 方法从db 接收数据。 当我使用 wp_enqueue_script 并将它们添加到 wordpress 时，它工作正常。但我的问题是如何使用 wp_ajax 方法而不是原始 ajax 调用。 这是我的代码：

在 my.js 文件中：

$(document).ready(function(){
$('#submit').on('click', function(){
    var name = $('input[name=name]').val();
    var price = $('input[name=price]').val();
    var goods = $('input[name=goods]').val();
    var date = $('input[name=delivery]').val();
    if( name.length > 1 && price.length >1 && goods.length > 1 && date.length >1){
        var obj = {
            name: name,
            price: price,
            goods: goods,
            date: date
        };
        var btn=$(this).button('loading');
        $.ajax({
            url: "service.php",
            method: "POST",
            data: obj,
            dataType:'json',
            success: function(e){
               $('#alt-div').html('<div id="alert" class="alert alert-info alert-dismissable"><a  href="#" class="close" data-dismiss="alert" aria-label="close">×</a>'+e.Comment+'</div>');
            },
            error: function(){
                alert('error');
            }
        })
    }
});
});

在 service.php 文件中：

 $name = $_POST['name'];
 $goods = $_POST['goods'];
 $date = $_POST['date'];
 $price = $_POST['price'];
 $tmp = explode('/', $date);
 $jy = $tmp[0];
 $jm = $tmp[1];
 $jd = $tmp[2];

 $query = "INSERT INTO products (name, goods, price, date) VALUES ('$name', 
 '$goods', '$price', '$time')";
 results = mysql_query($query);
 $inserted_id= mysql_insert_id();
 if ($results > 0)
   echo   json_encode ([
    'status'=>1,
    'Comment'=>"ok"]);

Answer 1

首先，它不是在 php 文件上发送 ajax 请求的正确方法。这样做会导致很多重要的功能没有被执行，会导致代码容易受到sql注入等威胁。

在 wordpress 中发送 ajax 的正确方法是在 wp-admin/admin-ajax.php

只需将您的 ajax 调用指向 admin_url("admin-ajax.php?action=my_action");

$.ajax({
        url: '<?php echo admin_url("admin-ajax.php?action=my_action"); ?>',
        method: "POST",
        data: obj,
        dataType:'json',
        success: function(e){
           $('#alt-div').html('<div id="alert" class="alert alert-info alert-dismissable"><a  href="#" class="close" data-dismiss="alert" aria-label="close">×</a>'+e.Comment+'</div>');
        },
        error: function(){
            alert('error');
        }
    })

记得在 ajax 调用中检查你的 action 参数。这将是您要为此 ajax 调用执行的功能的标识。现在你可以在你的插件或模板functions.php的任何地方添加下面的行。

add_action("wp_ajax_my_action", "my_action_function");
add_action("wp_ajax_nopriv_my_action", "my_action_function");

function my_action_function (){
    //your code
}

现在，无论何时执行您的 ajax 调用。它将转到wp-admin/admin-ajax.php 并将执行此功能。在这里您可以处理您的发帖请求。

您可以参考这篇文章以获得更多帮助。 https://www.smashingmagazine.com/2011/10/how-to-use-ajax-in-wordpress/