Question

我有一个PHP电子邮件表单，用户输入他们的电子邮件，然后向他们发送他们上传的文件的链接。我如何用AJAX提交该表格？

现在，我点击链接转到带有电子邮件表单的页面，然后我在URL中传递$target_path变量，以便链接到上传的文件在电子邮件中。这是我在“成功上传”页面上的PHP转到email.php：

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

以下是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>

正如您所看到的，当他们点击链接转到“成功上传的文件”页面（email.php）上的upload.php时，它会传递$target_path变量，以便它能够发送上传文件的链接。

我想将电子邮件表单放在upload.php（文件上传表单提交的页面）上，然后使用jQuery AJAX提交该电子邮件表单。我只是不知道如何做这项工作。我还需要传递该变量，但我不认为它会在URL中，它可能在AJAX代码的其他地方。

非常感谢任何帮助。

谢谢，
森

Answer 1

以下是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);
            }
        });         
    });
});

这是HTML位代码

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

似乎你的email.php会返回有效的消息，所以点击按钮会发生什么，你的php提供的内容将取代表单内容！页面不刷新。

我建议你更改的一件事是GET方法，将其更改为POST！对于php我假设您知道它是$_POST[varname]来检索值，而对于JS，只需将AJAX类型更改为POST。

Answer 2

您可以向包含target_path值的表单添加隐藏输入，这样您就可以避免通过url传递它，并且可以从jQuery AJAX回调中轻松访问它。

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

并添加

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

并使用data参数发送它们。

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

否则第一篇文章几乎涵盖了它。

Answer 3

我强烈推荐在http://jquery.malsup.com/form/找到的 JQuery Form 插件。将ajax功能添加到新表单或现有表单中是非常简单的，我将它用于可以在ajax模式和非ajax模式下运行的应用程序。

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

3 个答案: