Javascript 使用Ajax提交表单不起作用。

因此，我整个晚上都在网上阅读如何解决这个问题，但我尝试的似乎没有任何效果。因此，我将在这里尝试，看看是否有帮助可以接受。我正在尝试用ajax在我的网站上提交表单，这样我就不必重新加载页面。但是，表单仍然正常提交和重定向。我的代码是这样的。预防有时有效，有时无效。如果有任何更多的信息我可以提供，请一定让我知道。致以最良好的祝愿

function validateForm() {

var allFilled = true;
$('input[type=text].required').each(function() { //See so nothing is empty
    if($(this).val() == ""){allFilled = false;}
});

if(allFilled === false){return [false, "Alla fälten måste vara ifyllda"]}

var dateInput = $("#datepicker").val();
if(!moment(dateInput, 'DD/MM-YYYY',true).isValid()){ //Validate the date if its in the right format
    return [false, "Datumet måste vara formaterat DD/MM-YYYY"];
}

var lastDateInput = $("#datepicker2").val();
if(!moment(lastDateInput, 'DD/MM-YYYY',true).isValid()){ //Validate the date if its in the right format
    return [false, "Senaste datumet för anmälan måste vara formaterat DD/MM-YYYY"];
}

if(!/^\d{2}:\d{2}$/.test($("#clockpicker").val())){ // Check the time format HH:MM
  return [false, "Den angivna tiden måste vara formaterad HH:MM"];
}

var acceptedHalfTimeLength = $("#halftimeLength").val();
var acceptedHalfTimeLengths = [10,15,20,30,40,45];
var validLength = false;
for(var i = 0; i < acceptedHalfTimeLengths.length;i++){ //The value has to be some of the following in the array
  if(parseInt($acceptedHalfTimeLength) === acceptedHalfTimeLengths[i]){
    validLength = true; 
  }
}
if(validLength === false){
  return [false, "Den angivna halvlekstiden stämmer ej in på de accepterade längderna"]
}

return [true, "Match added"];
}

使用ajax运行的php脚本如下所示

add.php

  <?php

include_once "DBH.php";


$date       = mysqli_real_escape_string($conn, $_POST['date']);
$teamOne    = mysqli_real_escape_string($conn, $_POST['teamOne']);
$teamTwo    = mysqli_real_escape_string($conn, $_POST['teamTwo']);
$arena      = mysqli_real_escape_string($conn, $_POST['arena']);
$halftimeLength = mysqli_real_escape_string($conn, $_POST['halftimeLength']);
$gender     = mysqli_real_escape_string($conn, $_POST['gender']);
$yob        = mysqli_real_escape_string($conn, $_POST['yob']);
$salary     = mysqli_real_escape_string($conn, $_POST['salary']);
$lastDate   = mysqli_real_escape_string($conn, $_POST['lastDate']);
$time       = mysqli_real_escape_string($conn, $_POST['startTime']);
$lat        = mysqli_real_escape_string($conn, $_POST['lat']);
$long       = mysqli_real_escape_string($conn, $_POST['long']);

//Create a dateobject from the string that comes from the input and format it.
$formatedDate = DateTime::createFromFormat('d/m-Y', $date)->format('Y-m-d');
$formatedLastDate = DateTime::createFromFormat('d/m-Y', $lastDate)->format('Y-m-d');

$sql = "INSERT INTO games (`date`, `teamOne`, `teamTwo`, `arena`, `halftimelength`, `gender`, `kull`, `salary`, `lastDate`, `time`, `lat`, `long`) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)";

$stmt = mysqli_stmt_init($conn);

if(!mysqli_stmt_prepare($stmt, $sql)){
  echo "Main statement failed";
}else{
   mysqli_stmt_bind_param($stmt, "ssssssssssdd", $formatedDate, $teamOne, $teamTwo, $arena, $halftimeLength, $gender, $yob, $salary, $formatedLastDate, $time, $lat, $long);
mysqli_stmt_execute($stmt);
}

?>

---

尝试在数组中设置值，如下所示：

var obj = {
    "getListaHoteis": true,
    "estado" : $("#selEstado").val(), //value of your input 1
    "cidade" : $("#selCidade").val(), //value of your input 2
    "dispo" : getDisponibilidade(), //value of your input 3
    "aceita_pet" : $('#chkPet').is(':checked'), //value of your input 4
    "dist_praia" : distPraia, //value of your input 4
    "tipo_lugar" : $("#seltipoLugar").val() //value of your input 4
};

然后发送到$.ajax

$.ajax({
    url: "getListaHoteis.php",
    type: "POST",
    data: obj,
    dataType: "json",
    success: function (dt) { console.log(dt) };});

---

使用（点击

F12

）并读取任何错误

$acceptedHalfTimeLength

应该是

acceptedHalfTimeLength

，

url:“add.php”

应该是

url:“add.php”，

^修复分号，它应该消除js编译失败的错误。始终要学会在web浏览器中使用开发工具。它将为你节省大量的挠头和寻找答案的时间。在执行扩展js块时，此站点也是一个很有价值的工具：

$.ajax({
    url: "getListaHoteis.php",
    type: "POST",
    data: obj,
    dataType: "json",
    success: function (dt) { console.log(dt) };});