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

尝试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">在PHP做

删除操作，并在同一页上响应

Answer 2

试试这个：

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

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

Answer 3

可能是这个意志帮助你并满足你的要求 http://sharp-coders.blogspot.in/2012/06/submit-form-using-ajax-without.html