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

Posted 2023-05-09

【中文标题】Ajax 在 JQuery 表单插件中不起作用

【英文标题】：Ajax not working in JQuery form plugin

【发布时间】：2016-09-13 03:19:47

【问题描述】：

我正在使用 ajax 实现 Jquery 表单插件，以便将我的表单插入到数据库中。验证工作正常，但 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'];

【问题讨论】：

echo json_encode(array("type"=>"success","data"=>$data_array));死;以json格式传递数据。

您既没有发送City 也没有发送Country，因此您将永远不会输入if 语句，因此除非您在此之后有输出，否则您将看不到任何内容...

@RohanVeer 没用

@RohanVeer $data_array 的值是多少？

@TheFlash 据你说，当我尝试编写 url: $form.attr('action') 并在

【参考方案1】：

你没有从 ajax 传递城市和国家，但你仍然试图获取这些字段的值，甚至你还在 php 中设置了条件，如果 FirstName、Email、Password、City、Country 都设置了，那么只能去在 if 条件下。

所以 2 解决方案可用：

1) 从 id 条件中删除 City 和 Country 并尝试获取它

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);
                
            );

        );
);

【讨论】：

我从两个文件中删除了城市和国家，但在提交表单后我仍然没有收到任何警报响应

您在控制台的 ajax 请求中是否看到任何错误？ 404 还是 500 ??

在这种情况下，只需检查它是否进入 if 条件或不在 php 文件中？

我没有得到任何回应，即使写了 else 条件

【参考方案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。

【讨论】：

@TheFlash 不抱歉

@fsacer 根据 TheFlash 和你的说法，当我尝试编写 url：$form.attr('action') 并在

@bc110402307SyedZeeshanHaide 您需要订阅表单的提交事件并防止表单默认操作

@bc110402307SyedZeeshanHaide $('#signup_form').submit(function(e)e.preventDefault;);

@fsacer 是什么意思？ "您需要订阅表单的提交事件并阻止表单默认操作"