我有一个带有ajax调用的简单web，参数可以单独使用： 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>
我创建了一个功能＆＃34; Ping ＆＃34;在 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电话，请你能帮帮我吗？感谢。
答案 0 :(得分：1)
首先，我在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函数的按钮的onclick事件 PING（）
然后在我的主题js文件夹中上传js（ ping.js ）： 的的public_html /可湿性粉剂内容/主题/ 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函数normaly主题。
在我的案例 $ _ POST ['ip'] 中，参数可以在php函数中作为 $ _ POST 变量访问。
在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 ----------------------------------------------
对于将正确的顺序排入队列
非常重要在php函数的末尾添加 wp_die（）或 die（）非常重要，否则函数会返回“0”
函数名称完全匹配非常重要：
使用ajax调用的参数“action”