个人中心
gpt4 book ai didi

ajax - 如何使用参数对 Wordpress 站点进行 ajax 调用

转载 作者：行者123 更新时间：2023-12-01 22:21:13 25 4
gpt4 key购买 nike

我有一个简单的 web，带有一个 ajax 调用，其参数单独运行良好: http://www.colome.org/utils/

这是示例代码:

index.html:

<!DOCTYPE html>
<html lang=en>
<head>
    ...
    <script src="codi.js"></script>
    ...
</head>
<body>
<section id="main">
    <table id="tng" class="datagrid">
        <tbody>
        </tr><tr>
            <td width="50%" align="right"><b>Host or IP:</b></td>
            <td><input  id="ip" size="20" value="" ></td>
            <td><button type="button" onclick="Ping()">Ping</button></td>
        </tr>
        </tbody>
    </table>
  ...
</section>  
<h3 id="notification"></h3>
</body>
</html>

我在 codi.js 中创建了一个函数“Ping”来进行 ajax 调用

codi.js:

function Ping()
{
    $("#image").show();
        var ip=document.getElementById('ip');
    $.ajax({
        type: "POST",
        url: "http://...../ping.php",
        cache: false,
        //contentType: "application/json; charset=utf-8",
        //dataType: "json",
        data: {"ip" : ip.value}, 
        success: onSuccesPing,
        error: onErrorPing,
        crossDomain:true
    });

}
function onSuccesPing(data,status)
{
   document.getElementById("notification").innerHTML=data;
}
function onErrorPing(data,status)
{
   document.getElementById("notification").innerHTML=data.responseText);
}

最后是 ping.php 代码，非常简单:

<?php
$ip =   $_POST["ip"];
exec("ping -c 3 ".$ip." 2>&1", $output, $status);
foreach ($output as $key => $value) {
    echo ($value.'<br>');
}

?>

我试图将此代码集成到我的 wordpress 网站，如下例所示: For example this way 但我不知道如何将参数传递给 ajax 调用，请你能帮帮我吗？谢谢。

最佳答案

经过几天的努力，终于找到了解决办法，希望对遇到这个问题的人有所帮助:

首先，我用这段 html 代码在 wordpress 中创建了一篇文章:

<section id="main">
<table id="tng" class="datagrid">
    <thead><tr><th colspan="3"> 
        Sample ping App
        </th>
    </thead>
    <tbody>
    </tr><tr>
        <td width="50%" align="right"><b>Host or IP:</b></td>
        <td><input  id="ip" size="20" value="" ></td>
        <td><button type="button" onclick="PING()">Ping</button></td>
        <td> <img id="image" src="spinner.gif" alt="wait..." style="display: none;"></td>
    </tr>
    </tbody>
</table>

如您所见，唯一重要的是调用函数 PING() 的按钮的 onclick 事件

然后在我的案例中上传我的主题 js 文件夹中的 js (ping.js):public_html/wp-content/themes/metone_wp/js:

function PING(){
    $imatge=document.getElementById('image');
    $imatge.show();
    $ip=document.getElementById('ip');
    $val=ip.value;
    $params={action:'ping_php',ip: $val}

    jQuery.ajax({
       type: "POST",
       url: ajax_object.ajaxurl,
       cache: false,
       //contentType: "application/json; charset=utf-8",
       //dataType: "json",
       data: $params, 
       success: onSuccesPing,
       error: onErrorPing
       //error: onErrorPing,
       //crossDomain:true
     });
   //another way to make the same
   // jQuery.post(ajax_object.ajaxurl, $params,function (response){
   //   document.getElementById("notification").innerHTML=response;
   //   document.getElementById("image").style.display = "none";
   //  });
}
function onSuccesPing(data,status)
{
   jQuery("#notification").fadeIn(0); 
   document.getElementById("notification").innerHTML=data;
   document.getElementById("image").style.display = "none";
   jQuery("#notification").delay(5200).fadeOut(300);

}
function onErrorPing(data,status)
{
   jQuery("#notification").fadeIn(0);  
   document.getElementById("notification").innerHTML=data.responseText;
   document.getElementById("image").style.display = "none";
   jQuery("#notification").delay(5200).fadeOut(300);
}

将参数传递给 ajax 调用的诀窍是:

 $params={action:'ping_php',ip: $val}

$params 是一个参数数组，必须有一个强制参数“action”，它指的是在wordpress的functions.php中正常定义的php函数主题。

在我的例子中，参数可以作为 $_POST 变量在 php 函数中访问 $_POST['ip']。

为了在 wordpress 中定义函数，我使用了主题 functions.php，以及这段代码:

//----------------------------- test utils ini-----------------------------------------
function ping_php ()
{
     $ip=$_POST['ip'];
    exec("ping -c 3 ".$ip." 2>&1", $output, $status);
    foreach ($output as $key => $value) {
        echo ($value.'<br>');
    }
   die();
}
add_action( 'wp_ajax_ping_php', 'ping_php' );
add_action( 'wp_ajax_nopriv_ping_php', 'ping_php' );
function enqueue_scripts() {
        wp_register_script('ajax-script',  get_template_directory_uri() .'/js/ping.js', array('jquery'), 1.0 ); 
        wp_localize_script( 'ajax-script', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); // setting ajaxurl
    wp_enqueue_script( 'ajax-script'); // jQuery will be included automatically
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');
//---------------------------test utils end ----------------------------------------------

遵循正确的顺序对脚本进行排队很重要

  1. 首先是wp_register_script:包括js文件的目录和启用的jquery
  2. 然后 wp_localize_script:用于将变量从 wordpress 传递到我的脚本，在我的例子中是 ajax 处理的 url:ajaxurl
  3. 最后wp_enqueue_script

在 php 函数末尾添加 wp_die() 或 die() 很重要，否则函数返回 "0"

函数名称完全匹配也很重要:

  • add_action( 'wp_ajax_ping_php', 'ping_php' );
  • add_action( 'wp_ajax_nopriv_ping_php', 'ping_php' );

使用ajax调用的参数"action"

关于ajax - 如何使用参数对 Wordpress 站点进行 ajax 调用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39905959/

25 4 0
文章推荐： 来自控制台 (@ARGV)/Windows/的 Perl unicode 支持
文章推荐： three.js - 为什么在三个js中增加对象的比例时fps会下降
文章推荐： R: as.double(y) 中的错误:无法将类型 'S4' 强制转换为类型 'double' 的向量 -- 栅格数据
文章推荐： php - 什么时候 "get_class equals"与 "instanceof"不同？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com