formValidation 不通过 ajax 提交

Posted 2023-05-09

【中文标题】formValidation 不通过 ajax 提交

【英文标题】：formValidation does not submit by ajax

【发布时间】：2017-12-08 18:11:08

【问题描述】：

enter image description here

这是我的 javascript 代码，当我尝试创建一个 http post 请愿书时，它会将数据作为 http get 发送。

$(document).ready(function()

    $('#formClient').bootstrapValidator(
        framework: 'bootstrap',
        feedbackIcons: 
          valid: 'glyphicon glyphicon-ok',
          invalid: 'glyphicon glyphicon-remove',
          validating: 'glyphicon glyphicon-refresh'
        ,
        fields: 
          phone: 
            validators: 
              integer: 
                  message: 'El valor no es un numero'
              ,
              notEmpty:  message: 'La Numero de telefeno que se requiere y no puede estar vacío',
              stringLength: 
                  min: 8,
                  max: 8,
                  message: 'El numero debe contener 8 caracteres'
              

            
          ,
          email: 
            validators: 
              notEmpty:  message: 'La dirección de correo electrónico que se requiere y no puede estar vacío',
              emailAddress:  message: 'la dirección electrónica es no valida'
            
          ,
          name: 
            validators: 
              notEmpty:  message: 'El nombre esta vacio',
              stringLength: 
                min: 3,
                max: 50,
                message: 'El nombre debe ser inferior a 50 caracteres'
              
            
          ,
          lastname: 
                validators: 
                  notEmpty:  message: 'El apellido esta vacio',
                  stringLength: 
                    min: 10,
                    max: 50,
                    message: 'El apellido debe ser inferior a 50 caracteres'
                  
                
              ,
          city: 
            validators:  
              notEmpty:  message: 'El contenido es necesario y no puede estar vacío'
            
          
        
      )
     .on('success.form.fv', function(e) 
            // Prevent form submission
            e.preventDefault();

            var $form = $(e.target),
                fv    = $form.data('formValidation');

            var link = "/admin/clients/add";

            alert();

            // Use Ajax to submit form data
            $.ajax(
                url: link,
                type: 'POST',
                data: $form.serialize(),
                success: function(result) 
                    // ... Process the result ...
                    alert();
                
            );

            $form.formValidation('disableSubmitButtons',  true);
        );




    //Log Out User and redirect to log in page

    $("#logoutBtn").click(function()
        $("#formlogout").submit();
    );

);

在以 GET HTTP 形式发送路径的点之后。

这是我的 html 表单客户端：

                <!-- form to client -->
                <form id="formClient" class="form-horizontal form-label-left">

                <input type="hidden" th:name="$_csrf.parameterName" th:value="$_csrf.token" />
                <span class="section">Informacion Personal</span>

                  <div class="item form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="telephone">Telefono <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                      <input type="text" name="phone"  data-fv-integer-message="The value is not an integer" placeholder="Telefono" class="form-control col-md-7 col-xs-12"/>
                  </div>

                  </div>
                  <div class="item form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Nombre del Cliente <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                      <input class="form-control col-md-7 col-xs-12" name="name" placeholder="Nombre" type="text"/>
                    </div>
                  </div>

                  <div class="item form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="lastname">Apellidos <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                      <input class="form-control col-md-7 col-xs-12" name="lastname" placeholder="Apellidos" type="text"/>
                    </div>
                  </div>

                  <div class="item form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="city">Ciudad <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                      <select name="city" class="form-control">
                        <option value="">Seleccione..</option>
                        <option value="Cartago">Cartago</option>
                        <option value="Heredia">Heredia</option>
                        <option value="Alajuela">Alajuela</option>
                        <option value="Limon">Limon</option>
                        <option value="San Jose">San jose</option>
                        <option value="Puntarenas">Puntarenas</option>
                        <option value="Alajuela">Guanacaste</option>
                      </select>
                    </div>
                  </div>

                  <div class="item form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Correo <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                      <input type="email" name="email" placeholder="Correo" class="form-control col-md-7 col-xs-12"/>
                    </div>
                  </div>

                  <div class="item form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="state">Permitir Fiado <span class="required"></span>
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                      <input type="checkbox" name="guarantor" class="js-switch" checked="checked" /> Fiado
                    </div>
                  </div>

                  <div class="item form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="state">Usuario <span class="required"></span>
                    </label>
                    <div class="col-md-6 col-sm-6 col-xs-12">
                      <input type="checkbox" name="state" class="js-switch" checked="checked" /> Activo
                    </div>
                  </div>

                  <div class="ln_solid"></div>
                  <div class="form-group">
                    <div class="col-md-6 col-md-offset-3">
                      <button id="sendClient" type="submit" class="btn btn-success">Guardar Cliente</button>
                    </div>
                  </div>
                </form>
                <!-- /form to client -->

【问题讨论】：

向我们展示您的标记<form>

这里是html表单

【参考方案1】：

看起来您在创建可以使用的表单时没有使用方法：

<form id="formClient" class="form-horizontal form-label-left" method="post">

我创建了一个小提琴：使用方法后输出似乎发生了变化。如果需要任何进一步的帮助，请告诉我： Fiddle

【讨论】：

是的，我做到了，但控制台向我显示：Whitelabel 错误页面此应用程序没有明确的 /error 映射，因此您将其视为后备。 2017 年 7 月 5 日星期三 03:09:24 CST 出现意外错误（类型=不允许方法，状态=405）。不支持请求方法“POST”，服务器返回此请求方法“POST”不支持

@JustinZuñigaTorres 您需要在控制器中定义一个 POST requestMapping 条目来处理此类请求

我的控制器收到@PostMapping("/admin/clients/add") 这个HTTP POST