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，但这太过于夸张了。