Question

我正在尝试构建订阅表单。我不能在我的网站上运行php，我不希望用户离开主站点订阅时事通讯。我正在使用this example as server side。如果您尝试输入电子邮件，您将被重定向，即使电子邮件已添加到mailchimp列表，也会显示错误消息。

<div id="email">
<span>Your email..</span>
<form action="http://simondahla.com/jolliassets/notify.php" id="notify" method="POST">
    <input type="text" placeholder="your@email.com" name="email" id="address" data-validate="validate(required, email)"/>
    <span>We'll never spam or give this address away</span>
    <button type="submit">&#187;</button>
</form>
<span id="result"></span>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#notify').submit(function() {
        var action = $(this).attr('action');
        $.ajax({
            url: action,
            type: 'POST',
            data: {
                email: $('#address').attr('value')
            },
            success: function(data){
                $('#result').html(data).css('color', 'green');
            },
            error: function() {
                $('#result').html('Sorry, an error occurred.').css('color', 'red');
            }
        });
    });
});
</script>

live example of the problem

Answer 1

您需要从提交处理程序返回false。这是为了防止浏览器执行默认操作，即以正常方式提交表单。

$('#notify').submit(function() {
   // .. your ajax call
   return false;
});

Answer 2

在PHP函数中，如果代码成功或失败，您将返回所需的值。

成功：

print json_encode(array("status"=>"success","message"=>'Successfully added'));

失败：

print json_encode(array("status"=>"error","message"=>'There was an error'));

然后在HTML中返回如下消息：

success: function(data){
            $('#result').html(content.message).css('color', 'green');
        },
        error: function() {
            $('#result').html(content.message).css('color', 'red');
        }

Ajax不显示服务器响应

2 个答案: