javascript - jQuery ajax 表单不起作用

Question

我尝试了很多方法来创建一个简单的 jquery ajax 表单，但不知道为什么它没有提交和/或返回通知。

这是我的代码:

Javascript

...
<script type="text/javascript" src="assets/js/jquery1.11/jquery-1.11.0.min.js"></script>
...

$('#form_signup').submit(function(event) {
    event.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'signup.php',
        data: $(this).serialize(),
        dataType: 'json',
        success: function (data) {
            console.log(data);
            $('#form_signup_text').html(data.msg);
        },
        error: function (data) {
            console.log(data);
            $('#form_signup_text').html(data.msg);
        }
    });
});

HTML

<form id="form_signup" name="form_signup" method="POST">
    <div>
        <input type="email" id="inputEmail1" name="inputEmail1" placeholder="your@email.com">
    </div>
    <div>
        <a type="submit">Sign up!</a>
    </div>
    <div id="form_signup_text">
        <!-- A fantastic notice will be placed here =D -->
    </div>
</form>

PHP

<?php

$our_mail =    "our@email.com";
$subject  =    "Wohoo! A new signup!";
$email    =    $_POST['inputEmail1'];

$return = array();
$return['msg'] = 'Thank you!';
$return['error'] = false;

if(preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/", $email)){

    $message = "Yesss!! We receive a new signup!
    E-mail: $email
    ";
    mail($our_mail, $subject, $message);

}
else {
    $return['error'] = true;
    $return['msg'] .= 'Something is wrong... snifff...';
}

return json_encode($return);

<小时/>

已解决:

存在三个问题。不同的用户会解决这些问题。

1. 在 PHP 中，您必须“echo”返回数组而不是“return”
2. 首先，您应该在表单中使用提交按钮而不是 anchor
3. 在输入中，您必须同时设置“id”和“name”

如果这些用户中的任何一个需要，您可以编辑或添加包含这些详细信息的新答案，积分就是您的。

Answer 1

你需要做三件事。

首先，将 jQuery 代码包装在 $(document).ready() 函数中，

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#form_signup').submit(function(event) {
            event.preventDefault();
            $.ajax({
                type: 'POST',
                url: 'signup.php',
                data: $(this).serialize(),
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    $('#form_signup_text').html(data.msg);
                },
                error: function (data) {
                    console.log(data);
                    $('#form_signup_text').html(data.msg);
                }
            });
        });
    });
</script>

第二，向表单添加提交按钮。此外，您还缺少电子邮件输入字段的 name 属性。这会导致 php 文件中出现错误。

<form id="form_signup" name="form_signup" method="POST">
    <div>
        <input type="email" id="inputEmail1" name="inputEmail1" placeholder="your@email.com">
    </div>
    <div>
        <input type="submit" name="signup" value="Sign Up!"/>
    </div>
    <div id="form_signup_text">
        <!-- A fantastic notice will be placed here =D -->
    </div>
</form>

第三，回显结果，因为您使用 AJAX 提交表单。 return不会有任何效果。

<?php

$our_mail =    "our@email.com";
$subject  =    "Wohoo! A new signup!";
$email    =    $_POST['inputEmail1'];

$return = array();
$return['msg'] = 'Thank you!';
$return['error'] = false;

if(preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/", $email)){

    $message = "Yesss!! We receive a new signup!
    E-mail: $email
    ";
    mail($our_mail, $subject, $message);
}
else {
    $return['error'] = true;
    $return['msg'] .= 'Something is wrong... snifff...';
}

echo json_encode($return);exit;

我检查了一下，一切正常。

希望这有帮助:)