文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Wordpress站点中使用参数进行ajax调用

问如何在Wordpress站点中使用参数进行ajax调用
EN

Stack Overflow用户

提问于 2016-10-06 21:33:47

回答 1查看 10.7K关注 0票数 2

我有一个简单的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 codi.js”，用于进行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调用，请您帮我一下好吗？谢谢。

wordpress

parameters

ajax

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-10-12 16:35:25

几天后，我终于找到了解决办法，我希望它能帮助那些有这个问题的人：

首先，我在wordpress中创建了一个帖子，其中包含以下html代码：

<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>

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

然后将js (ping.js)上传到我的主题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上定义。

这些参数可以以$_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 ----------------------------------------------

按照正确的顺序排列脚本是很重要的

首先，wp_register_script：包含js文件的目录，并启用jquery。
然后，wp_localize_script：有用地将变量从wordpress传递到我的脚本--在我的例子中是ajax处理的url：ajaxurl
最后wp_enqueue_script

在php函数的末尾添加wp_die()或die()是很重要的，如果函数不返回"0"

同样重要的是，函数名完全匹配：

'wp_ajax_ping_php'，'ping_php‘；
'wp_ajax_nopriv_ping_php'，'ping_php‘；

使用ajax调用的参数"action"

票数 7

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39905959

复制

相似问题

问如何在Wordpress站点中使用参数进行ajax调用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Wordpress站点中使用参数进行ajax调用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Wordpress站点中使用参数进行ajax调用
EN