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

Question

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

现在，我可以在他们单击链接的页面上找到带有电子邮件表单的页面，并在URL中传递$target_path变量，以便可以在电子邮件中找到上载文件的链接。 这是我在“成功上传”页面上可以访问email.php的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>

如您所见，当他们单击“成功上传的文件”页面（ upload.php ）上的链接以转到email.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 个解决方案

解决方案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