javascript - 用于 php 脚本的 AJAX

Question

我是 Web 开发的新手，尤其是 AJAX (jquery)，我遇到了一个问题

我有 3 个 php 脚本

输入.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>  

---

数据.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

最佳