提交表单，使用脚本处理信息，并在同一页面上显示结果

Question

我基本上是在尝试和这个人做同样的事情：

jQuery - submit form via AJAX and put results page into a div...?

即，提交表单并在提交成功后在同一页面上显示消息。

但是，我的情况略有不同。我正在使用一个脚本，该脚本允许我通过电子邮件发送链接以下载文件，并且该脚本控制成功或失败消息。另外，我正在使用 CMS，Joomla。

所以，这通常的工作方式是这样的：

您在页面上填写表格并按发送。提交后，您会看到一个带有感谢信息的 html 页面。如果出现任何问题，您会看到一条失败消息。如果一切顺利，您会收到一封电子邮件，其中包含下载文件的链接。

要做到这一点，必须做到以下几点：

1) 在页面顶部添加以下行（调用脚本）：

<?php require_once("myscript.php"); ?>

2) 添加表单

表单的动作必须是脚本文件：

<form action="myscript.php" method="post">

3) 告诉脚本电子邮件的参数： 哪些文件，链接的过期时间，以及非常重要的返回 url 的地址，可以是带有谢谢的地址信息。其他参数其实并不重要。

<?php emailfunction('myfile.zip',15,1,'thankyou.html',0); ?>

我想要做的是能够在提交后在同一页面上显示一条消息，如本文开头提到的示例。理想情况下，隐藏表单并显示消息。但是，我没有设法做到这一点。

我认为我的问题是我不知道如何：

告诉服务器只发回您指定的 HTML 部分 想要用来填充 DIV（这是更有效的方式），或者 从您想要的服务器响应中挑选出特定的 html， 例如$("#someDiv").html($(html).find('#results'));

正如前面示例中答案的作者所指出的那样。

当出现问题时，我会被发送到脚本中指定的地址，如下所示：

$ErrorTemplate="/home/server/public_html/errortemplate.html";

如果我从这里删除thankyou.html地址：

<?php emailfunction('myfile.zip',15,1,'thankyou.html',0); ?>

我被发送到表单的 action 参数中指定的地址。

所以我认为我缺少的，但我不知道如何解决，是来自脚本的答案，然后可以由 jQuery 处理。我也试过这个：

http://support.webvanta.com/support_article/615726-submitting-forms-with-ajax

但它也不起作用。

我一直与脚本的开发人员保持联系，但是，尽管他是一个非常好的人，但他说他对 jQuery 和 Ajax 一无所知，所以他无法真正帮助我。

你可以在这里看到我使用的表格：

http://perrerac.org/musica/chile/congreso/397-congreso-congreso

如果您检查标题，您会发现一个文件：perrerac.org/downloader/ajaxsubmitform.js

这是试图复制上述帖子中的示例。

非常感谢任何帮助！

Answer 1

这是一个使用 ajax 提交并获取返回的完整页面的一部分并仅使用 html 的 sn-p 插入当前页面的示例

这假设 joomla 不会因为通过 ajax 处理而重定向到不需要的页面。

/* using very generic selector for form, should use more unique one to that form*/

$('form').submit(function(event){
     /* prevent normal browser submit*/
      event.preventDefault();
     /* do some validation, return if invalid*/

      /* collect the data to send*/
     var data=$(this).serialize();
     /* using shortcut method $.post, can use $.ajax for access to all options and more flexibility if needed*/
     $.post('path/to/action', data,function( responseHtml){
         /* create a jQuery object out of returned page for finding html needed*/
         var $newPage= $(responseHtml);
          /* find id=results div in new page, insert in id=someDiv*/
         $("#someDiv").html( $newPage.find('#results'));
         /* if need to run any code on results html, do it here, it exists now in page*/

     }).error(function(){
           alert('Ooooops');
     });  
});