Ajax不能在JQuery表单插件中工作

时间:2016-05-17 06:54:20

标签: javascript php jquery ajax jquery-plugins

我正在使用ajax实现Jquery表单插件,以便在db中插入我的表单。验证工作正常,但ajax调用没有收到任何响应数据。 也许,我不知道这样做的确切方法。 通过指导使用此插件的真实方式帮助我。 感谢。

JS_File

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

2 个答案:

答案 0 :(得分:2)

你没有从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);
                }
            });

        });
});

答案 1 :(得分:2)

我认为错误在于您设置url

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

您说该表单包含属性form_process.php,其中包含网址。你可能意味着这个:

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

其他修正:

  • 订阅表单提交事件并阻止默认操作:
  

$( '#signup_form')。提交(函数(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的情况下工作,然后使用插件站点中的follownig示例http://malsup.com/jquery/form/#ajaxForm来执行AJAX。