如何使用jQuery AJAX提交此表单？

Question

I have a PHP email form and the user enters their email and it sends them the link to the file they uploaded. 我有一个PHP电子邮件表单，用户输入他们的电子邮件，它将链接发送给他们到他们上传的文件。 How would I submit that form with AJAX? 我将如何使用AJAX提交该表格？

Right now, I have it where they click on a link to go to the page with the email form on it, and I am passing the $target_path variable in the URL so the link to the uploaded file can be in the email. 现在，我可以在他们单击链接的页面上找到带有电子邮件表单的页面，并在URL中传递$target_path变量，以便可以在电子邮件中找到上载文件的链接。 Here's the PHP I have on the "Successfully uploaded" page to go to email.php : 这是我在“成功上传”页面上可以访问email.php的PHP：

<?php echo "<a href='email.php?target_path=".$target_path."'>Click here</a> to get the link sent to your email." ?>

Here's the source of email.php : 这是email.php的来源：

<html>
<head>
<title>Upload File</title>
<style type="text/css">
body {
font-family:arial,sans-serif;
}
.error {
color:red;
}
</style>
</head>
<body>
<?php
function spamcheck($field)
  {
  //filter_var() sanitizes the e-mail
  //address using FILTER_SANITIZE_EMAIL
  $field=filter_var($field, FILTER_SANITIZE_EMAIL);

  //filter_var() validates the e-mail
  //address using FILTER_VALIDATE_EMAIL
  if(filter_var($field, FILTER_VALIDATE_EMAIL))
    {
    return TRUE;
    }
  else
    {
    return FALSE;
    }
  }

if (isset($_REQUEST['email']))
  {//if "email" is filled out, proceed

  //check if the email address is invalid
  $mailcheck = spamcheck($_REQUEST['email']);
  if ($mailcheck==FALSE)
    {
    echo "Invalid email, please try again.";
    }
  else
    {//send email
    $to = $_REQUEST['email'] ;
    $subject = "Your file has been uploaded to our site and here's a link to it" ;
    $message = "
Hello,

Your file has been uploaded to our site. Here is a link to it for future reference, keep this email if you want to remember the link to your file: http://www.example.com/upload/".$_REQUEST['target_path']."

Thank you.";

    mail($to,$subject,$message, "From: noreply@example.com" );
    echo "Email has been sent. Please check your inbox and/or spam folder.";
    }
  }
else
  {//if "email" is not filled out, display the form
  echo "<form method='post' action=''>
  Email: <input name='email' type='text' /><br /><br />
  <input type='submit' />
  </form>";
  }
?>
</body>
</html>

As you can see, when they click the link to go to email.php on the "Successfully Uploaded File" page ( upload.php ) it passes the $target_path variable so it will be able to send a link to the uploaded file. 如您所见，当他们单击“成功上传的文件”页面（ upload.php ）上的链接以转到email.php时，它将传递$target_path变量，以便能够发送指向已上传文件的链接。

I would like to put the email form right on upload.php (the page where the file upload form gets submitted to) and then submit that email form with jQuery AJAX. 我想将电子邮件表单直接放在upload.php （文件上传表单提交到的页面）上，然后使用jQuery AJAX提交该电子邮件表单。 I just don't know how to make that work. 我只是不知道该怎么做。 I'll also need that variable to still be passed, but I don't think it would be in the URL, it would probably be in somewhere else in the AJAX code. 我还需要仍然传递该变量，但是我认为它不会出现在URL中，它可能会出现在AJAX代码中的其他位置。

Any help is greatly appreciated. 任何帮助是极大的赞赏。

Thanks, 谢谢，
Nathan 内森

Answer 1

Following is the JS bit of code 以下是JS代码

$(document).ready(function(){

    $('#emailbtn').click(function(){
            //This is short form of php echo
        var target_path = <?php=$target_path?> 

            //Get eMail from input
            var email = $('#email').val(); 

            //Send form to email.php using GET method
        $.ajax(
        {
            type: "GET",
            url: "email.php",
            data: ({"target_path" :  target_path, "email" : email}),
            success: function(message)
            {   
                $("#btnspan").empty().append(message);
            }
        });         
    });
});

This is HTML bit of code 这是HTML的一部分代码

<span id="btnspan">Your eMail: <input type="text" name="email" id="email" /> <button id="emailbtn" class="button">eMail me the link</button></span>

Seems your email.php return valid messages, so what will happen when you click on the button is that content provided by your php will replace the form content! 看来您的email.php返回有效消息，所以当您单击该按钮时，将发生的情况是php提供的内容将替换表单内容！ Page does NOT refresh. 页面不刷新。

One thing I would suggest you change is the GET method, change it to POST! 我建议您更改的一件事是GET方法，将其更改为POST！ For php I assume you know it's $_POST[varname] to retrieve the value and for the JS, just change AJAX type to POST. 对于php，我假设您知道它是$_POST[varname]来检索值，而对于JS，只需将AJAX类型更改为POST。

Answer 2

You could add a hidden input to the form containing the target_path value, so you avoid passing it through the url, and you can easily access it from the jQuery AJAX callback. 您可以在包含target_path值的表单中添加隐藏的输入，因此避免将其通过url传递，并且可以从jQuery AJAX回调轻松访问它。

<input type='hidden' id='path' value='<?php echo $target_path;?>'/>

and add 并添加

var path=$('#path').val();
var email=$('#email').val();

and send both of them with the data parameter. 并使用data参数发送它们两者。

data:{'path' : path, 'email' : email}

Otherwise first post almost covered it. 否则，第一篇文章几乎涵盖了它。

Answer 3

I would highly recommend the JQuery Form plugin found at http://jquery.malsup.com/form/ . 我强烈建议您在http://jquery.malsup.com/form/找到的JQuery Form插件。 It makes it trivial to add ajax functionality to new or existing forms and I use it on applications that could be run in both ajax mode and non ajax mode. 在新的或现有的表单中添加ajax功能变得微不足道，并且我在可以同时在ajax模式和非ajax模式下运行的应用程序上使用了它。

如何使用jQuery AJAX提交此表单？

问题描述

3 个解决方案

解决方案1
2 已采纳 2011-08-05 06:03:09

解决方案2
2 2011-08-05 07:04:57

解决方案3
1 2011-08-05 07:07:40

如何使用jQuery AJAX提交此表单？

问题描述

3 个解决方案

解决方案1 2 已采纳 2011-08-05 06:03:09

解决方案2 2 2011-08-05 07:04:57

解决方案3 1 2011-08-05 07:07:40

解决方案1
2 已采纳 2011-08-05 06:03:09

解决方案2
2 2011-08-05 07:04:57

解决方案3
1 2011-08-05 07:07:40