2016-12-15 66 views
0

目前我有一個簡單的方法來做到這一點通過使用客戶端驗證。修復PHP沒有顯示在它自己的網站上

<form id="mail" action="form.php" method="post"> 
    <label for="name">Username</label><input type="text" id="name" name="name" /> 
     <label for="pwd">Password</label><input type="password" id="pwd" name="pwd" /> 
     <label for="email">Email</label><input type="email" id="email" name="email" /> 
    <input type="submit" value="submit"> 
</form> 

,並在服務器端

<?php 
echo "Thanks for joining, " . $_POST["name"] . "!<br />"; 
echo "A confirmation email might have been sent to: " . $_POST["email"] . " if this were a real site.";?> 

我在JavaScript中

$('#mail').on('submit', function(e) {   // When form is submitted 
    e.preventDefault();        // Prevent it being sent 
    var details = $('#mail').serialize();   // Serialize form data 
    $.post('form.php', details, function(data) { // Use $.post() to send it 
    $('#mail').html(data);     // Where to display result 
    }); 
}); 

到目前爲止已經試過當點擊提交整個頁面變成了PHP的echo消息。有沒有辦法在網站上顯示它?

+1

也許開始閱讀關於Ajax(純JS或使用框架)... http://api.jquery.com/jquery.ajax/ < - 與jQuery開始,如果你想。 – Asfo

+0

如果jQuery代碼沒有運行,你會得到的症狀會發生,所以表單正常提交。它在'$(document).ready()'裏面嗎? – Barmar

回答

0

這應該處理:

$('#mail').on('submit', function(e) { 
e.preventDefault(); 
    $.get(
     "submit_page.php", 
     { 
      mail: document.getElementById('mail').value, 
      other: document.getElementById('other').value //Some other value 
     }, 
     function(data) { 
      $('#mail').html(data); 
     }); }); 
0

看起來你已經在使用jQuery庫,你可以使用它的AJAX功能以異步方式發佈數據,並接收來自服務器一個JSON的答案,而不改變當前的頁:

$('#mail').on('submit', function(e) 
 
{ 
 
    e.preventDefault(); 
 
    $.ajax(
 
\t { 
 
\t \t data:{"fieldName":fieldValue}, 
 
\t \t type:"POST", 
 
\t \t dataType: "json", 
 
\t \t url: "destination.php", 
 
\t \t success: successFunction 
 
\t }); 
 
} 
 

 
function successFunction(result) 
 
{ 
 
\t alert(result.message); 
 
}

你的PHP可能是這個樣子:

<?php 
 
    //Some php stuff 
 

 
    $json['message'] = "A confirmation email might have been sent..."; 
 

 
    header('Content-type: application/json; charset=utf-8'); 
 
\t echo json_encode($json, JSON_FORCE_OBJECT); 
 
?>

+0

'$ .post'只是'$ .ajax'的一個快捷方式,默認了一大堆參數。爲什麼他應該使用'$ .ajax'呢? – Barmar

相關問題