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存在并输出一些东西，那么

“success”应该触发。您可以像通常编写表单提交处理程序（即使用或不使用AJAX）一样编写process.php，因为数据将在$_POST中提供。

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

Answer 2

您需要在PHP中添加echo '(something)';，它应该可以正常运行。您应该将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消息然后在success函数中添加if ... else语句来添加错误处理。你也可以使用JSON，但这对你来说太过分了。

Ajax联系表

2 个答案: