Question

所以我整个晚上一直在网上阅读如何解决这个问题，但似乎没有什么工作我尝试。所以我打算到这儿来试试看是否有帮助可以收到。我正在尝试使用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"];
}

我用它来确保用户的所有输入都正确格式化。

然后我会采取相应的行动。

$( "#myform" ).on( "submit", function(event) {

event.preventDefault();

var validateResult = validateForm();
var validateBoolean = validateResult[0];
var validateMessage = validateResult[1];


var lat = marker.getPosition().lat(); //From map
var long = marker.getPosition().lng();
if(validateBoolean === true){
  $.ajax(
   {
     type : "POST",
     url : "add.php";
     data : $("#myform").serialize() + "&lat=" + lat + "&long=" + long,
     success:function(result){
       alert("Game added");
     }
  }
  );
}else{
  document.getElementById('alert').innerHTML = validateMessage;
  $("#alert").effect( "shake", {times:4}, 1000 );
}
});

使用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);
}

?>

Answer 1

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

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) };});

提交表单时Ajax无法正常工作。

1 个答案: