以 HTML 形式调用 php，但不重定向答案

【问题标题】：Call php in HTML form on action but don't redirect以 HTML 形式调用 php，但不重定向
【发布时间】：2013-11-12 04:55:53
【问题描述】：

我有一个 HTML 表单如下：

<form id="ContactForm" name="ContactForm" method="post" action="emailinfo.php">

然后是一个调用verify()的提交按钮：

<a href="#" class="button1" onClick="verify()">Send</a>

verify 是这样定义的：

function verify() {
    if(document.getElementById("name").value=="" || document.getElementById("email").value=="") {
        alert("Please enter a name and an email.");
    } else {
        alert("Looks good, sending email");
        document.getElementById('ContactForm').submit();
    }
}

目前，当我单击提交按钮时，浏览器会重定向到 emailinfo.php，这只是一个空白屏幕，因为该 php 文件只是发送一封电子邮件而没有做任何其他事情。如何在不重定向的情况下运行 php 文件？

【问题讨论】：

ajax 最适合你的情况。

标签： javascript php html forms

【解决方案1】：

您要做的是在单击按钮时使用 AJAX 向 emailinfo.php 文件发送请求。将表单操作设为空白将导致表单发布到您所在的同一页面。

如果您使用 jQuery，通过 ajax 提交表单非常容易：

$(document).ready( function() {
    $('.button1').click(function(){
        var f = $('#ContactForm');
        $.ajax({
          type: "POST",
          url: "emailinfo.php",
          data: f.serialize()
        });
    });
});

【讨论】：

我只使用 javascript。我将如何在 javascript 中做到这一点

【解决方案2】：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
function verify() {
 if(document.getElementById("name").value=="" || document.getElementById("email").value=="") {
    alert("Please enter a name and an email.");
 } else {
    alert("Looks good, sending email");
    //document.getElementById('ContactForm').submit();
    var name=$('#name').val();
    var email=$('#email').val();
    var  formData = "name="+name+"&email="+email;
    $.ajax({
        url : "emailinfo.php",
        type: "POST",
        data : formData,
        success: function(data, textStatus, jqXHR)
        {
            //data - response from server
            alert(data);
        },

    });
  }
}

</script>
<form id="ContactForm" name="ContactForm" method="post" action="">
<input  type="text" name="name" id="name"/>
<input  type="text" name="email" id="email"/>
<a href="#" class="button1" onClick="verify()">Send</a>
</form>

【讨论】：

【解决方案3】：

ContactForm首先将a 标记更改为一个按钮，然后将verify() 分配给它的onclick。然后在verify()。使用 ajax 将表单中的值发布到 emailinfo.php。

你可以使用

    $.post( 
        "emailinfo.php", 
        $( "#ContactForm" ).serialize(),
        function( data ) { 
           /* do things with responce */
    } );

【讨论】：

【解决方案4】：

这种情况下我通常做的是ajax，但是如果你不想使用ajax，你可以简单地添加'return false'让它在使用表单提交时不会被重定向：

function verify() 
{
  if(document.getElementById("name").value=="" ||document.getElementById("email").value=="") 
  {
    alert("Please enter a name and an email.");

  } 
  else 
  {
    alert("Looks good, sending email");
    document.getElementById('ContactForm').submit();
    return false;
  }
}

【讨论】：