javascript - 使用 AJAX 使用从 mysql 数据库中提取的数据填充表单

Question

当从下拉框中选择体操运动员时，我试图用数据自动填充表单。我知道我需要使用 AJAX，并且已经尝试过 - 但是我的 Javascript 太糟糕了，看吧；我的代码很糟糕。

ajax_populate_gymnasts.php:

<?php 
require('../includes/dbconnect.php');
$gymnastid = $_POST['gymnast'];

$sql = "SELECT * FROM gymnasts WHERE id='$gymnastid'";
   $result = mysqli_query($GLOBALS['link'], $sql);
$msg ='';
    if (mysqli_num_rows($result) > 0){
        foreach($result as $row)
        {
          //Change to populate fields on form with data.
       echo ($row);
        }
    }
    else{
        $msg .="<option>No Gymnasts were found!</option>";
        echo ($msg);
    }
    mysqli_close($GLOBALS['link']);

?>

function getGymnasts(val){
	$.ajax({
		type:"POST",
		url:"ajax_populate_gymnasts.php",
		data: 'gymnast='+val,
		success: function(data){
			$("#dob").value(data['dob']);
			$("#gender").value(data['gender']);
			$("#parent").value(data['parent']);
			$("#email").value(data['email']);
			$("#phone").value(data['phone']);
			$("#address").value(data['address']);
			$("#status").value(data['status']);
		}
	});
}

<?php require('adminheader.php');


?>
<script>

</script>
<h1>Edit Gymnast</h1>
<form method="post">
	<label for="gymnast">Gymnast:</label>
		<select id="gymnast" name="gymnast" onChange="getGymnasts(this.value)" required/>
			<option value="0">None yet</option>
			<?php  
				$gymnasts = mysqli_query($GLOBALS['link'], "SELECT * FROM gymnasts;");
				foreach($gymnasts as $gymnast){
				echo("<option value=".$gymnast['id'].">".$gymnast['name']."</option>");
				}
			?>
		</select><br>
	<label for="dob">Date of Birth:</label>
		<input type="date" id="dob" name="dob" required/>
	<label for="gender">Gender:</label>
		<select id="gender" name="gender" required />
			<option value="F">Female</option>
			<option value="M">Male</option>
		</select><br>
	<label for="parent">Parent's Name:</label>
		<input type="text" id="parent" name="parent" required /> <br>
	<label for="email">Contact Email:</label>
		<input type="text" id="email" name="email" required /> <br>
	<label for="phone">Contact Phone:</label>
		<input type="text" id="phone" name="phone" required /> <br>
	<label for="parent">Contact Addres:</label>
		<textarea id="address" name="address" required /></textarea><br>
	<select id="status" name="status" required />
			<option value="0"></option>
	
	<input type="submit" id="saveChanges" name="saveChanges"  />
</form>

Answer 1

您的AJAX 函数需要像

function getGymnasts(val){
    $.ajax({
        type:"POST",
        url:"ajax_populate_gymnasts.php",
        data: 'gymnast='+val,
        success: function(response){
            var result = JSON.parse(response);
            if (result.response == true) {
                var data = result.rows;
                $("#dob").val(data[0].dob);
                $("#gender").val(data[0].gender);
                $("#parent").val(data[0].parent);
                $("#email").val(data[0].email);
                $("#phone").val(data[0].phone);
                $("#address").val(data[0].address);
                $("#status").val(data[0].status);
            }else if (result.response == false) {
                $('#gymnast').append('<option>No Gymnasts were found!</option>');
            }
        }
    });
}

和你的ajax_populate_gymnasts.php

<?php
require('../includes/dbconnect.php');

$sql = "SELECT * FROM gymnasts WHERE id='$gymnastid'";
$result = mysqli_query($gym, $sql);

if (mysqli_num_rows($result) > 0) {
    $data = mysqli_fetch_all($result, MYSQLI_ASSOC);
    echo json_encode(['rows' => $data, 'response' => true]);
} else {
    echo json_encode(['response' => false]);
}
mysqli_close($GLOBALS['link']);
exit();
?>
}