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

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

的末尾，完成其他所有事情

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

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

实际问题：

您需要将jQuery对象的val()方法更改为value，或者使用jQuery简化dom搜索

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

应该是：

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

或者

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

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

1 个答案: