用ajax返回提交的html

Question

现在，我知道有几个问题可能看起来像这样，但简而言之，我还没有找到我需要的功能，更不用说让它工作了。我想从我网站页脚中的表单发送的消息中返回一条确认消息，而不是将用户返回到新页面。

默认状态

消息发送后

表格

<form>
     <input type="text" name="field1" placeholder="Form field 1" />
     <input type="text" name="field2" placeholder="Form field 2" />
     <input type="text" name="field3" placeholder="Form field 3" />

     <input type="submit" value="Submit button" />
</form>

AJAX - 这是我迷路的地方

$('#submit_button').click(function (event)
{
    event.preventDefault();
    $.ajax(
    {
        type: 'POST',
        url: 'parse.php',
        data: $('form').serialize(),
        success: function ()
        {
            alert('form was submitted');
        }
    });
});

理论上，这将调用文件parse.php，该文件验证信息，与数据库一起使用，并发送mail函数。我遇到的问题是页面返回一个空表单并且没有警报，也没有得到我想要的任何其他类型的响应（php header('Location: http://google.com')等）。

我想知道的是，我的javascript是否有问题，或者是因为我的表单需要更多参数（method，enctype ...）？

Answer 1

<强>首先 您错过了html id中的元素，请使用：

<form>
     <input type="text" name="field1" placeholder="Form field 1" />
     <input type="text" name="field2" placeholder="Form field 2" />
     <input type="text" name="field3" placeholder="Form field 3" />    
     <input type="submit"  id="submit_button"  value="Submit button" /> //here set the id to element
</form>

<强>第二 你可以使用javascript：

success: function ()
{
    window.location.href = 'http://www.google.com/';
}

重定向到另一个页面

Answer 2

工作解决方案：

<强>表格

<form>
    <input type="text" name="field1" placeholder="Form field 1" />
    <input type="text" name="field2" placeholder="Form field 2" />
    <input type="text" name="field3" placeholder="Form field 3" />

    <input type="submit" value="Submit button" />
</form>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function()
    {
        $('form').submit(function()
        {
            $.get('parse.php', $(this).serialize(), function(data)
            {
                $('#content').html(data);
            }
            return false;
        }
    }
</script>

<强> parse.php

if( isset($_REQUEST['field1']) and
    isset($_REQUEST['field2']) and
    isset($_REQUEST['field3']) )
{
    // Headers and other parameters
    $sujet = "Email Subject line";
    $mailto = "my@email.com";

    $headers = "";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-type: text/html; charset=UTF-8"."\r\n";
    $headers .= "From: " . $from . "\r\n";
    $headers .= "Organization: ACNE CO.\r\n";
    $headers .= "X-Priority: 3\r\n";
    $headers .= "X-Mailer: PHP". phpversion() ."\r\n";
    $message = "";

    // Info to send
    $field1 = $_REQUEST['field1'];
    $field2 = $_REQUEST['field2'];
    $field3 = $_REQUEST['field3'];

    $message .= "Field 1 description: " . $field1 . "<br />";
    $message .= "Field 2 description: " . $field2 . "<br />";
    $message .= "Field 3 description: " . $field3 . "<br />";

    mail($mailto, $sujet, $message, $headers);

    // Confirmation message
    $confirmation = '<div id="confirmation">Message sent</div>';
    print($confirmation);
}