Question

在我的页脚中，我有一个订阅者表单，任何用户都可以订阅网站。

表单

<form id="newsletter-signup" action="?action=signup" method="post">
    <input type="email" name="email" id="email" placeholder="Email" required/>
    <input type="submit" id="signup-button" value="" />
</form>

我想使用ajax在数据库中提交数据。我之前从未使用过ajax所以它有一个问题我无法解决它。我使用了动作动作=＆＃34;？action = signup＆＃34;因此，每当我点击它，它就会转到404.html。所有其他任务都运行正常。电子邮件存储在数据库中，所有其他检查也正常。我希望这不会转到404.html页面。而不是这个它应该显示这个订阅成功的消息。脚本部分就是这个。

脚本

$(document).ready(function() {
    $('#newsletter-signup').submit(function() {
            //check the form is not currently submitting
            if ($(this).data('formstatus') !== 'submitting') {
                //setup variables
                var form = $(this),
                    formData = form.serialize(),
                    formUrl = form.attr('action'),
                    formMethod = form.attr('method'),
                    responseMsg = $('#signup-response');
                //add status data to form
                form.data('formstatus', 'submitting');
                //send data to server for validation
                $.ajax({
                        url: formUrl,
                        type: formMethod,
                        data: formData,
                        success: function(data) {
                            //setup variables
                            var responseData = jQuery.parseJSON(data),
                                klass = '';
                            //response conditional
                            switch (responseData.status) {
                                case 'error':
                                    klass = 'response-error';
                                    break;
                                case 'success':
                                    klass = 'response-success';
                                    break;
                            }
                        });
                }
            });
    }
    //prevent form from submitting
    return false;
});

数据以

的形式存储在数据库中

if($_GET['action'] == 'signup'){
    //Data storing code     
}

所有这些文件都在footer.php中。

Answer 1

试试这个会起作用：

您的Html表单代码中的更正：

<form id="newsletter-signup" action="#123" method="post">
    <input type="email" name="email" id="email" placeholder="Email" required/>
    <input type="submit" id="signup-button" value="" />
</form>

请勿使用?action=signup提供正确的页面路径，例如page.php?action=signup或使用ajax调用来保存表单数据并在同一页面上显示成功的消息。

脚本代码中的更正：

$(document).ready(function() {
    $('#newsletter-signup').submit(function() {
    console.log("rohit");
    return false;
            //check the form is not currently submitting
            if ($(this).data('formstatus') !== 'submitting') {
                //setup variables
                var form = $(this),
                    formData = form.serialize(),
                    formUrl = 'page.php?action=signup',
                    formMethod = form.attr('method'),
                    responseMsg = $('#signup-response');
                //add status data to form
                form.data('formstatus', 'submitting');
                //send data to server for validation
                $.ajax({
                        url: formUrl,
                        type: formMethod,
                        data: formData,
                        success: function(data) {
                            //setup variables
                            var responseData = jQuery.parseJSON(data),
                                class = '';
                            //response conditional
                            switch (responseData.status) {
                                case 'error':
                                    class = 'response-error';
                                    break;
                                case 'success':
                                    class = 'response-success';
                                    break;
                            }
                            }
                        });
                }
    });
    //prevent form from submitting
    return false;
});

page.php：

if($_GET['action'] == 'signup'){
    // Your code comes here.    
}

Answer 2

在成功功能之后，您似乎有一些语法错误。

我在文档准备好之后更新了这样的代码

＆＃13;

$('#newsletter-signup').submit(function(e) {
    		e.preventDefault();
            //check the form is not currently submitting
            if ($(this).data('formstatus') !== 'submitting') {
                //setup variables
                var form = $(this),
                    formData = form.serialize(),
                    formUrl = form.attr('action'),
                    formMethod = form.attr('method'),
                    responseMsg = $('#signup-response');
                //add status data to form
                form.data('formstatus', 'submitting');
                //send data to server for validation
                $.ajax({
                        url: formUrl,
                        type: formMethod,
                        data: formData,
                        success: function(data) {alert(data);
                            //setup variables
                            var responseData = jQuery.parseJSON(data),
                                klass = '';
                            //response conditional
                            switch (responseData.status) {
                                case 'error':
                                    klass = 'response-error';
                                    break;
                                case 'success':
                                    klass = 'response-success';
                                    break;
                            }
                        }
                })
            }
    });

＆＃13;

尝试使用一些调试工具，如firebug。请尝试更新代码并检查。

订阅者使用ajax无法正常工作

2 个答案: