在WordPress中使用AJAX或jQuery返回PHP脚本的结果 - Using AJAX or jQuery in WordPress to Return Results of PHP Script

Using AJAX or jQuery in WordPress to Return Results of PHP Script

我有一个接受用户输入的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，但我已经尝试过没有工作。有人能给我一些指导吗?

感谢!

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

php代码在这个(test.php)文件的顶部:-

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

你需要退出否则它会显示这个文件中的所有数据所以用另一种方式使用php来处理

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

试试这个:

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

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