我有一个简单的 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 ----------------------------------------------
遵循正确的顺序对脚本进行排队很重要
- 首先是wp_register_script:包括js文件的目录和启用的jquery
- 然后 wp_localize_script:用于将变量从 wordpress 传递到我的脚本，在我的例子中是 ajax 处理的 url:ajaxurl
- 最后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/