Ajax聯繫表

Question

我一直在尋找一個ajax（jQuery或任何其他框架）的形式，將在後臺發送三個變量，然後顯示一些文本，而不是刷新本網站本身。

例：以上

http://net.tutsplus.com/demos/contactform/

例自帶的教程，但不幸的是，PHP後端爲它不工作，所以我在尋找別的東西。

你有什麼想法嗎？或者jQuery初學者的任何提示如何從頭開始構建它？

如果這樣的請求被禁止在這裏然後我想問問如何使用該腳本發送變量：

$.ajax({ 
    type: "POST", 
    url: "bin/process.php", 
    data: dataString, 
    success: function() { 
    $('#contact_form').html("<div id='message'></div>"); 
    $('#message').html("<h2>Contact Form Submitted!</h2>") 
    .append("<p>We will be in touch soon.</p>") 
    .hide() 
    .fadeIn(1500, function() { 
     $('#message').append("<img id='checkmark' src='images/check.png' />"); 
    }); 
    } 
}); 
return false; 

後端？我與自己的bin/process.php文件長期爭鬥，似乎沒有任何工作（jQuery腳本的「成功」部分從未發生）。

非常感謝。

Answer 1

如果bin/process.php存在並輸出內容，「成功」應該會觸發。您可以按照通常編寫表單提交處理程序（即使用或不使用AJAX）的方式編寫process.php，因爲數據將在$_POST中可用。

然後，如果您的前端頁面有contact_form元素（<div id="contact_form">），您應該看到結果。

Answer 2

您需要添加echo '(something)';到您的PHP，它應該工作。你應該改變你的JS，爲更好的動畫如下：

$.ajax({ 
    type: "POST", 
    url: "bin/process.php", 
    data: dataString, 
    success: function() { 
    $('#message').hide(data) 
    .html("<h2>Contact Form Submitted!</h2>") 
    .append("<p>We will be in touch soon.</p>")  
    .fadeIn(1500, function() { 
     $('#message').append("<img id='checkmark' src='images/check.png' />"); 
     $('#contact_form').html("<div id='message'></div>"); 
    }); 
    } 
}); 
return false; 

傳遞變量，你需要設置dataString要麼'key1=bob&key2=bob2'（字符串）或字典 - {key1:'bob', key2:'bob2'}。有關更多信息，請參見jQuery ajax documentation。

您還可以通過更改echo消息，然後在成功函數中添加if .. else語句來添加錯誤處理。你也可以使用JSON，但這太過於誇張了。