AJAX für PHP-Skripte

Question

Ich bin ziemlich neu in Web-Entwicklung und insbesondere AJAX (jquery) und ich bin mit einem Problem konfrontiert

Ich habe 3 PHP-Skripte

input.php:

<form id="input" action='data.php' method='post'> 
<select name="id"> 
<?php 

require_once('function.php'); 
$conn = connect(); 

$sql = "SELECT id,item FROM t1"; 
$results = mysqli_query($conn, $sql) or die($mysqli->error); 
//echo "<form action='data.php' method='post'>"; 
while($row = $results->fetch_assoc()){ 
echo "<option value='" . $row['id'] . "'>" . $row['item'] . "</option>"; 
} 
?> 

<input type='Submit' value='Auswahl bestätigen'/> 

</select> 

---

data.php

<form action= 'change.php' method='post'> 

<?php 

$id = $_POST ["id"]; 
$id = $mysqli->real_escape_string($id); 


require_once('function.php'); 
$conn = connect(); 


$sql = "SELECT * FROM t1 WHERE id='".$id."'"; 
//echo $sql; 
$results = mysqli_query($conn, $sql); 
$row = mysqli_fetch_array($results); 

echo "ID: <input type='number' name='id' value='" .$row['id']. "' readonly 
size='5'><br><br>"; 

echo "Beschreibung: <input type='text' name='beschreibung' 
value='".$row['description']."'><br><br>"; 

echo "Finder: <input type='text' name='finder' required 
value='".$row['contact']."' /><br><br>"; 

echo "Datum: <input type='date' name='datum' required 
value='".$row['date']."'> <br><br>"; 

echo "Ort: <input type='text' name='ort' required value='".$row['place']."'> 
<br><br>"; 

echo "Abgeholt?: <input type='radio' name='abgeholt' value='1' />Ja"; 
echo   "<input type='radio' name='abgeholt' value='0' 
checked>Nein<br><br>"; 

echo "Abholdatum: <input type='date' name='abholdatum' 
value='".$row['retrieve date']."'> <br><br>"; 

?> 
<input type='Submit' value='Eintrag ändern!' /><br><br> 
</form> 

---

und change.php:

<?php 
$id = $_POST ["id"]; 
$item = $_POST ["gegenstand"]; 
$description = $_POST ["beschreibung"]; 
$contact = $_POST ["finder"]; 
$date = $_POST ["datum"]; 
$place = $_POST ["ort"]; 
$retrieved = $_POST ["abgeholt"]; 
$retrieve_date = $_POST ["abholdatum"]; 


require_once('function.php'); 
$conn = connect(); 




$item = $conn->real_escape_string($item); 
$description = $conn->real_escape_string($description); 
$contact = $conn->real_escape_string($contact); 
$date = $conn->real_escape_string($date); 
$place = $conn->real_escape_string($place); 
$retrieved = $conn->real_escape_string($retrieved); 
$retrieve_date = $conn->real_escape_string($retrieve_date); 



$sql ="UPDATE t1 

SET description = '$description', contact = '$contact', date = '$date', 
place = '$place', retrieved = '$retrieved' , retrieve_date = 
'$retrieve_date' 
WHERE id = '$id'"; 

//echo $sql;   

if ($conn->query($sql) === TRUE) { 
echo "New record created successfully" . "<br>" . "<br>"; 
} else { 
echo "Error: " . $sql . "<br>" . $conn->error; 
} 

$conn->close(); 

?> 

---

so mein Problem:
Diese Skripte arbeiten und ich bin in der Lage Einträge in meinem db (MariaDB) Aber ich möchte ändern sie geladen lassen über AJAX das Gefühl von meiner Seite (etwas, das niemand mag 3 Umleitungen ändern) zu verbessern

versuchte ich es mit der jquery $ .load Funktion, aber keine Freude

<script type="text/javascript">                      

$(document).ready(function(){ 
$('#f1').load('input.php'); 
}); 
}); 
</script> 

so meine Frage ist:
Ist es möglich, diese Skripte zu verbinden, sie zu max zu senken. 1 redirect oder besser noch, sie über AJAX in die html-Hauptseite zu integrieren?

ps: sorry für Grammatikfehler, Englisch ist nicht meine Muttersprache

Answer 1

Unter den vielen anderen Problemen ..

$(document).ready(function(){ 
    $("#input").submit(function(event){// Bind to the submit event of our form 
    // Prevent default posting of form - put here to work in case of errors 
    event.preventDefault(); 

    // Serialize the data in the form (get form data) 
    var serializedData = $(this).serialize(); 

    // Fire off the request to /data.php 
    request = $.ajax({ 
     url: "/form.php", 
     type: "post", 
     data: serializedData 
    }); 

    // Callback handler that will be called on success 
    request.done(function (response, textStatus, jqXHR){ 
     // Log a message to the console 
     console.log("Hooray, it worked!"); 
    }); 

    // Callback handler that will be called on failure 
    request.fail(function (jqXHR, textStatus, errorThrown){ 
     // Log the error to console 
     console.error(
      "The following error occurred: "+ 
      textStatus, errorThrown 
     ); 
    }); 

    }); 
}); 

Auch Attribute Aktion & Methode von Form entfernen. Wird nicht mehr benötigt.

<form id="input" > 
<select name="id"> 
.... 

Für weitere Informationen besuchen Sie bitte: JQuery Ajax

Beste