Question

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

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

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

但是，我的情况略有不同。我使用的脚本允许我通过电子邮件发送下载文件的链接，这个脚本控制成功或失败的消息。在adittion中，我使用的是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（ '＃结果'））;

正如上一个例子中答案的作者所指出的那样。

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

$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片段插入当前页面的示例

这假设由于通过ajax处理，joomla不会重定向到不需要的页面。

/* 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');
     });  
});

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

1 个答案: