阿贾克斯联系表答案

【问题标题】：Ajax Contact Form阿贾克斯联系表
【发布时间】：2010-11-23 03:08:16
【问题描述】：

我一直在寻找一种 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 脚本的“成功”部分从未发生过）。

非常感谢。

【问题讨论】：

你能发帖bin/process.php吗？
理想情况下，您应该在开始时隐藏 #message 以避免不良动画，并从淡入更改回调时 #contact_form 的 html。
我试图修改这个包中的原始文件：net.tutsplus.com/demos/contactform/demo.zip - 但似乎不起作用。然后尝试使用我自己的文件，它看起来像：jsfiddle.net/d2Z3R，对不起我的脚本中的 $Body = $message，只是剪掉了几行正文以显示我的脚本的核心。 @Fred，谢谢，但目前最大的问题是后端根本无法工作。
我认为您需要添加echo ''; 或return。我不是 100% 确定，所以如果我错了，请纠正我。

标签： php jquery ajax forms

【解决方案1】：

您需要将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，但这样做太过分了。

【讨论】：

【解决方案2】：

如果 bin/process.php 存在并输出某些内容，则应该触发“success”。您可以按照通常编写表单提交处理程序的方式编写 process.php（即使用或不使用 AJAX），因为数据将在 $_POST 中可用。

然后，如果您的前端页面有一个 contact_form 元素 (<div id="contact_form">)，您应该会看到结果。

【讨论】：