subscriber使用ajax无法正常工作

subscriber is not working properly using ajax

本文关键字：工作 常工作 使用 ajax subscriber      更新时间：2023-09-26

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

表单是

<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，所以它有一个问题，我无法解决它。我使用了action action="？action=signup"，因此每当我点击它时，它都会转到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中。

成功函数后，似乎出现了一些语法错误。

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

$('#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;
                            }
                        }
                })
            }
    });

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

试试这个就行了：

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.    
}
相关文章：