javascript - $.ajax 在我的代码中无法正常工作

Question

我尝试了许多不同的方法(这花了 3 天)来使用 Javascript ajax 命令将表单值发送到 php 脚本，但是我的页面仍然重新加载，并且没有任何内容插入到我的数据库中。我没有收到任何错误，脚本运行但没有产生任何结果。为了使这篇文章相对简短，我将 HTML 放在 pastebin 中。以防万一有人需要/想要看到它。

这是我的 php 脚本:

<?php
if($_POST) {
$link = mysqli_connect(localhost, <removed>, <removed>, <removed>);

function val_data($data){
  $data = trim($data);
  $data = strip_tags($data);
  $data = mysqli_real_escape_string($link,$data);
  return $data;
}

$type = val_data($_POST['type']);
$size = val_data($_POST['size']);
$date = val_data($_POST['datepicker']);
$message = val_data($_POST['message']);
$steam = val_data($_SESSION['steamid']);
//Query
$sql = "INSERT INTO requests (type, size, fdate, steam64id, message) VALUES ('$type', '$size', '$date', '$steam', '$message')";
$query = mysqli_query($link, $sql);
mysqli_close($link);
}
?>

这是我的 JavaScript:

function hideModal() {
   $('#myModal').modal('hide');
}

$(document).ready(function() {
   $(document).on('submit', '#myModal', function() {
      var error = "";
      var type = document.getElementById("type").val();
      var size = document.getElementById("size").val();
      var date = document.getElementById("datepicker").val();
      var message = document.getElementById("message").val();

      if(type == "") {
         error = "A Job type is required";
         document.getElementById("sparam").innerHTML = error;
         $("type").focus();
         return false;
      }

      if(size == "") {
         error = "A Job size is required";
         document.getElementById("sparam").innerHTML = error;
         $("size").focus();
         return false;
      }

      if(date == "") {
         error = "A desired completion date is required";
         document.getElementById("sparam").innerHTML = error;
         $("date").focus();
         return false;
      }

      if(message == "") {
         error = "A description of the job is required";
         document.getElementById("sparam").innerHTML = error;
         $("message").focus();
         return false;
      }

      $.ajax({
         type: 'post',
         url: 'ajaxsubmit.php',
         data: {
            type:type,
            size:size,
            date:date,
            message:message
         }, 
         success: function(res) {
            $('#sparam').html("Thanks! We'll be in touch soon");
            setTimeout(hideModal, 5000);
         }
      });
      return false;
    });
  });

Answer 1

这是一个很好的例子，表明使用 event.preventDefault() 比使用 return false 更安全，并且还使调试更容易。

$(document).on('submit', '#myModal', function(event) {
      event.preventDefault();
      // form won't submit if errors thrown after this

在返回 false 之前抛出的任何错误都会阻止函数内的剩余代码，并且由于未返回 false，浏览器将提交表单并重新加载页面...并且 return 必须位于其他所有内容之后，位于事件处理程序的末尾

如果确实发生这种情况，则调试起来会更加困难，因为抛出的错误只会在页面和控制台被清除之前立即到达控制台......使得调试这些错误变得更加困难

当您首先阻止默认值时，代码后面的任何错误都不好，但浏览器不会提交表单。但是控制台不会被清除，您可以快速发现错误

<小时/>

实际问题:

您需要将用于 jQuery 对象而不是 DOM 节点的 val() 方法更改为 value 或使用 jQuery 简化 dom 搜索

var type = document.getElementById("type").val();

应该是:

var type = document.getElementById("type").value;

或者

var type = $("#type").val();