用于PHP脚本的AJAX

Question

I am pretty new to Web Development and especially AJAX (jquery) and i am facing a problem

I have 3 php scripts

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>  

---

and 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 my problem:
These scripts are working and I am able to change entries in my db (mariadb) But I want to let them be loaded via AJAX to improve the feel of my site (nobody likes 3 redirects to change something)

I tried it with the jquery $.load function but no joy

<script type="text/javascript">                                                                                     

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

so my question is:
Is it possible to join these scripts to cut them down to max. 1 redirect or even better to integrate them via AJAX into the main html page?

ps: sorry for grammar mistakes , english isn't my mother tongue

Answer 1

Among many other problems..

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

   });
});

Also remove attributes action & method from form. Not needed anymore.

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

For more info visit: JQuery Ajax

Best