在WordPress中使用AJAX或jQuery返回PHP脚本的结果

Question

我有一个接受用户输入的HTML表单：

<form action="script_conv.php" method="post">
Convert: <input type="number" name="input" id="input">
<select name="unit1" id="unit1">
<option value="w">Words</option>
<option value="l">Lines</option>
<option value="p">Pages</option>
<option value="r">Recorded Minutes</option>
<option value="f">Finished Minutes</option>
</select>
to
<select name="unit2" id="unit2">
<option value="w">Words</option>
<option value="l">Lines</option>
<option value="p">Pages</option>
<option value="r">Recorded Minutes</option>
<option value="f">Finished Minutes</option>
</select>
<input type="submit">
</form>

php脚本获取用户数据并执行一些计算：

<?php
$input=$_POST["input"];
$unit1=$_POST["unit1"];
$unit2=$_POST["unit2"];

(bunch of if...else statements)

echo "<ul>";
echo "<li>$cat1f</li>";
echo "<li>$cat2f</li>";
echo "<li>$cat3f</li>";
echo "</ul>";
?>

一切正常，但是函数的结果当然会返回到新页面。 我想将函数的结果附加到同一页上。 我知道这将需要AJAX / jQuery，但是我尝试过的任何方法都没有用。 谁能给我一些指导？

非常感激！

Answer 1

尝试这个：

$(function(){
    $('form').submit(function(e){
        e.preventDefault();

        $.post('/path/to/your/php', $(this).serialize(), function(response){
            // do something with the response
        });
    });
});

Answer 2

试试test.php（html）：-

<form method='post'>
Convert: <input type="number" name="input" id="input">
<select name="unit1" id="unit1">
<option value="w">Words</option>
<option value="l">Lines</option>
<option value="p">Pages</option>
<option value="r">Recorded Minutes</option>
<option value="f">Finished Minutes</option>
</select>
to
<select name="unit2" id="unit2">
<option value="w">Words</option>
<option value="l">Lines</option>
<option value="p">Pages</option>
<option value="r">Recorded Minutes</option>
<option value="f">Finished Minutes</option>
</select>
<input type="button" onclick="getvalue();">
</form>

test.php（脚本功能）：-

<script src="http://localhost:8004/js/jquery-1.9.1.js"></script>
<script>
function getvalue() {
       var input= document.getElementById('input').value;
    var unit1=document.getElementById('unit1').value;
    var unit2=document.getElementById('unit2').value;

        $.ajax({
        type: "POST",
        url: "http://localhost:8004/test/test.php",
        data: { input: input,unit1:unit1, unit2:unit2,fun:'getvalue' }
        }).done(function( data ) 
        {
            alert(data);
        }); 
}

</script>

此（test.php）文件顶部的php代码：-

<?php if(isset($_REQUEST['fun']) == 'getvalue') 
{
echo $_REQUEST['input'].$_REQUEST['unit1'].$_REQUEST['unit2'];
exit();
}
?>

您需要退出，否则它将显示该文件中的所有数据，因此请使用另一种使用php的方式在php中进行操作

从<form method="post">删除操作，并在同一页面上获得响应

Answer 3

可能会对您有所帮助并满足您的要求http://sharp-coders.blogspot.in/2012/06/submit-form-using-ajax-without.html