Ajax在JQuery表單插件中不起作用

Question

我正在用ajax實現Jquery表單插件，以便將我的表單插入db。 驗證工作正常，但ajax調用未收到任何響應數據。 也許，我不知道確切的方法。 通過指導使用此插件的真實方法來幫助我。 謝謝。

JS_文件

$(document).ready(function() {
    $('#signup_form').formValidation({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
             // Here i have defined some rules
            }
        })
        .on('success.form.bv', function(e) {

 var firstName =   $('.name').val();
 var email =   $('.email').val();
 var password =   $('.password').val();

            e.preventDefault();

            var $form = $(e.target);
            $form.ajaxSubmit({
                // You can change the url option to desired target
                url: $form.attr('form_process.php'),
                type: 'POST',
                 data:{'FirstName':firstName,'Email':email,'Password':password},

                success: function(responseText) {
                        alert(responseText);
                }
            });

        });
});

form_process.php

<?php

if(isset($_POST['FirstName']) && isset($_POST['Email']) && isset($_POST['Password'])
        && isset($_POST['City']) && isset($_POST['Country']))
{
            echo $firstName = $_POST['FirstName'];
           echo $em = $_POST['Email'];
           echo $ftName = $_POST['Password'];
           echo $ame = $_POST['City'];
           echo $firame = $_POST['Country'];
}

Answer 1

您沒有從ajax傳遞城市和國家/地區，但您仍在嘗試獲取這些字段的值，甚至您也將條件設置在php中，如果將FirstName，Email，Password，City，Country全部設置，則僅在條件存在時才進入。

因此有2種解決方案可用：

1）從ID條件中刪除城市和國家/地區並嘗試將其獲取

if(isset($_POST['FirstName']) && isset($_POST['Email']) && isset($_POST['Password']))
{
           echo $firstName = $_POST['FirstName'];
           echo $em = $_POST['Email'];
           echo $ftName = $_POST['Password'];          
}

2）通過ajax請求傳遞城市和國家

$(document).ready(function() {
    $('#signup_form').formValidation({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
             // Here i have defined some rules
            }
        })
        .on('success.form.bv', function(e) {

 var firstName =   $('.name').val();
 var email =   $('.email').val();
 var password =   $('.password').val();
 var city = $(".city").val();
 var state = $(".state").val(); 

            e.preventDefault();

            var $form = $(e.target);
            $form.ajaxSubmit({
                // You can change the url option to desired target
                url: $form.attr('form_process.php'),
                type: 'POST',
                 data:{'FirstName':firstName,'Email':email,'Password':password,'City':city,'State':state},

                success: function(responseText) {
                        alert(responseText);
                }
            });

        });
});

Answer 2

我相信錯誤是您在此處設置url ：

url: $form.attr('form_process.php'),

您是說表單具有包含URL的form_process.php屬性。 您可能是這個意思：

url: $form.attr('action'),

其他修復：

• 訂閱表單提交事件並阻止默認操作：

$（'＃signup_form'）。submit（function（e）{e.preventDefault（）;}）;

• 嘗試在提交發生之前設置ajaxSubmit-意味着將代碼從事件success.form.bv向上移動：

    $('#signup_form').ajaxSubmit({ // You can change the url option to desired target url: $form.attr('form_process.php'), type: 'POST', data:{'FirstName':firstName,'Email':email,'Password':password}, success: function(responseText) { alert(responseText); } }); 

• 您可能使用了錯誤的方式使用插件，使表單首先在沒有ajax的情況下運行，然后使用來自插件網站的以下示例http://malsup.com/jquery/form/#ajaxForm進行AJAX。