Ajax POST 使用引导验证器转换为 GET

Posted

技术标签:

【中文标题】Ajax POST 使用引导验证器转换为 GET【英文标题】:Ajax POST turns GET with bootstrap validator 【发布时间】:2018-10-18 14:08:00 【问题描述】:

我对引导验证程序有疑问。我有一个包含近 40 个字段的表单,而且我没有使用原生 html / php 方式。我只是使用提交按钮来调用 ajax 并保存数据,但是当我这样做时,POST 变成了 GET,并且我有讨厌的“请求 URI 太长,请求的 URL 的长度超过了此服务器的容量限制。 " 我正在阅读所有以前的案例,但没有一个适合我。唯一有效且 POST 不会改变的是带走引导验证器,但这样一来,我无法控制前端的字段验证。 显然,AJAX 中的调用有效,甚至我可以调试 PHP(save.php),但响应是一个没有意义的 GET 调用。 这是我的代码,几周来我一直在尝试解决它,但没有成功。

JS函数:

$('#modalcust').validator().on('submit', function(e) 
  if (e.isDefaultPrevented()) 
    swal("Error, error"); // This is just an example.
   else 
    value = $("#field").val(); // Here I have nearly 40 different vars (field values).
    $.ajax(
      url: "db/save.php",
      type: "POST",
      data: value,
      success: function(data, textStatus, jqXHR) 
        $('#modalcust').modal('toggle');
      ,
      error: function(jqXHR, textStatus, errorThrown) 
        swal("Error!", textStatus, "error");
      
    );
  
);

HTML 表单:

<form  data-toggle="validator" role="form">
....
<button type="submit" class="btn btn-primary" id="btnsave"><i class="fa fa-save"></i> Save</button>
</form>

PHP:

<?php
include "conect.php";

$crud=$_POST['crudmethod'];
$protocolo = time() . rand(10*45, 100*98);
if($crud=='E')
    $protocol = $_POST['protocol'];


$rawData = $_POST['photosrc'];
if ($rawData) 
    $fotoFileName = 'uploads/'.$protocol.'.jpg';
    $fotosave = __DIR__ .'/../'.$fotoFileName;
    file_put_contents($fotosave, file_get_contents("data://".$rawData));


the 40 vars from POST

if($crud=='N')
    mysqli_query($conn, "insert into people( 'vars' ) values('vars')");

    if(mysqli_error($conn))
        $result['error']=mysqli_error($conn);
        $result['result']=0;
    else
        $result['error']='';
        $result['result']=1;
        $result['id']=mysqli_insert_id($conn);
    
else if($crud == 'E')
    mysqli_query($conn, "update people set 'vars = vars' where id = $id");
    if(mysqli_error($conn))
        $result['error']=mysqli_error($conn);
        $result['result']=0;
    else
        $result['error']='';
        $result['result']=1;
    
else

    $result['error']='Invalid';
    $result['result']=0;

$result['crud']=$crud;

$result['crud']=$crud;
echo json_encode($result);
?>

【问题讨论】:

【参考方案1】:

表单的HTML应改为:

<form id="modalcust" data-toggle="validator" role="form">

JS代码应改为:

$('#modalcust').validator();
$('#modalcust').on('submit', function(e) 
    e.preventDefault();
    value = $("#field").val(); // Here I have nearly 40 different vars (field values).
    $.ajax(
      url: "db/save.php",
      type: "POST",
      data: value,
      success: function(data, textStatus, jqXHR) 
        $('#modalcust').modal('toggle');
      ,
      error: function(jqXHR, textStatus, errorThrown) 
        swal("Error!", textStatus, "error");
      
    );
);

【讨论】:

以上是关于Ajax POST 使用引导验证器转换为 GET的主要内容,如果未能解决你的问题,请参考以下文章

JQuery:将 GET URL 转换为 POST

$.get()$.post()$.ajax()使用

AJAX(三)详解原生POST请求

基于form表单和ajax的登录示例

ajax的get与post提交方式

将 ajax actionlink 转换为引导按钮