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