AJAX 请求向 PHP 发送空表单数据答案

【问题标题】：AJAX request sends empty form data to PHPAJAX 请求向 PHP 发送空表单数据
【发布时间】：2018-10-23 10:19:00
【问题描述】：

这是向数据库发送数据的代码。当我填写表单字段并单击“添加记录”按钮时，它可以正常工作。它成功地将数据插入到数据库中。

但主要问题是如果表单字段为空，然后我单击按钮，它会将空数据发送到数据库。

function addRecord() {
  var formData = new FormData($("#form1")[0]); //It automatically collects all fields from form
  $.ajax({
    url: "ajax/EditDeleteLecture.php",
    type: "post",
    data: formData,
    async: false,
    cache: false,
    contentType: false,
    processData: false,
    success: function(output) {
      alertify.set('notifier', 'delay', 3);
      alertify.set('notifier', 'position', 'top-right');
      alertify.success('Data Inserted Successfully');
      readRecords();
      $('#form1').trigger("reset");
    }
  });
}

【问题讨论】：

在ajax/EditDeleteLecture.php 中，执行print_r($_POST); 并在此处发布输出。
if the form field is empty and then I click the button, it sends empty data to the database 这是标准行为。您是否希望在允许提交表单之前验证所有字段都已完成？另外，删除async: false。这是一种糟糕的做法，因为您正确使用了回调模式，所以这里不需要它。
在输入标签中添加required 属性，如<input type="text" name="first_name" required >。您也可以在发送 ajax 请求之前使用 javascript 和 jquery 进行验证
你必须检查你的php文件中的数据是否为空。
因为你没有处理和验证空白值

标签： php jquery ajax

【解决方案1】：

您有 3 个地方可以在保存到数据库之前解决空数据问题

1- 在您的输入元素中添加必需的属性，这样用户就不能提交空字段。

2- 在发出 ajax 请求之前，在 java 脚本函数 addRecord() 中验证您的表单数据。如果验证完成，则发送 ajax 调用 else 向用户显示消息以填充数据。

3- 验证您在 $_POST 变量中收到的数据，如果字段为空，则在 ajax 响应中发回错误消息并向用户显示错误。

【讨论】：

如何验证？
像这样的表单输入标签中需要输入

【解决方案2】：

确保将 contentType 属性设置为 "application/x-www-form-urlencoded" 以便在后端服务器中解析它。

【讨论】：

【解决方案3】：

当您获取表单数据值而表单字段值是否为空时...或使用 print_r($_POST) 数据..

/* 提交我的表单 */

  $( '#myform' ).submit(function() {

               var errors = [];

        /*     else if Textarea is empty display message error */
               if($('#myform textarea').val()=="") {  
                    errors[errors.length] = 'enter your message';
                }

        /*      if radio button is not being selected display message error */
                if (!$(":radio:checked").attr('checked')) {
                   errors[errors.length] = 'select a radio';
                }

                if(errors.length > 0){
                    var errMsg = "Please "

                    for(e = 0; e < errors.length-1; e++){
                        errMsg += errors[e]+", ";
                    }

                     errMsg = errMsg.substr(0, errMsg.length -2)+" and "+errors[errors.length-1];
                     $('#errors').empty().text(errMsg);
                     return false;
                }

        /*          Everthing is good display success message and add SENDING class to submit button */
                    else {
                        $('#myform :submit').addClass('sending').html('Sending message...');
                        $('#errors').empty().text('All Good :D');
                    }
                return false;
            });
        });

【讨论】：