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

Ajax not working in JQuery form plugin

本文关键字：不起作用 插件 表单 JQuery Ajax      更新时间：2023-09-26

我正在用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'];
}

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

我相信错误就在您设置url:的地方

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

您是说表单具有包含url的属性form_process.php。你可能是这个意思：

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

其他修复程序：

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

$（'#signup_form'）.submit（函数（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的情况下工作，然后使用以下示例执行ajaxhttp://malsup.com/jquery/form/#ajaxForm来自插件网站
相关文章：