AJAX的PHP腳本

Question

我非常新的Web開發，尤其是AJAX（jQuery的），我面臨的一個問題

我有3個PHP腳本

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> 

---

和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(); 

?> 

---

所以我的問題：
這些腳本的工作，我能夠改變我的分貝（MariaDB的） 項，但我想讓他們被加載通過AJAX來提高我的網站的感覺（沒有人喜歡3個重定向改變的東西）

我與jQuery的$ .load功能，但沒有喜悅試過

<script type="text/javascript">                      

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

所以我的問題是：
是否有可能加入這些腳本，以減少到最大。 1重定向，甚至更好地通過AJAX將它們集成到主html頁面中？

PS：抱歉語法錯誤，英語不是我的母語

Answer 1

在許多其他問題..

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

    }); 
}); 

同時刪除屬性行動從形式&方法。不再需要了。

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

欲瞭解更多信息，請訪問：JQuery Ajax

最佳