訂戶無法使用ajax正常工作

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，所以其中存在問題，我無法解決。我使用了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中。

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

成功功能執行后似乎出現語法錯誤。

准備好文檔后，我更新了這樣的代碼

 $('#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。 請嘗試更新代碼並檢查。