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

Submit form, process info with script, and display results on the same page

本文关键字：一页 显示 结果 信息 表单 脚本 提交 处理      更新时间：2023-09-26

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

jQuery - 通过 AJAX 提交表单并将结果页面放入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); ?>

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

所以我认为我缺少的，但我不知道如何解决，是脚本中的一个答案，然后可以由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

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

任何帮助都非常感谢！

下面是一个使用 ajax 提交并获取返回的整页的一部分并仅使用该 html 片段插入当前页面的示例

这假设 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');
     });  
});
相关文章：