Javascript 带有web访问的Postgresql数据库-代码正确更新数据库，但重新加载网页需要很长时间
我有一个假设动物园的postgresql数据库。我正在使用php和一些javascript为我的数据库创建web访问。我已经成功地让大多数网页正常工作，但我现在正在开发一个允许客户从当前展品中添加和删除动物的页面。我有一个下拉列表，其中填充了数据库中的展品名称，第二个下拉列表从数据库中填充了分配给当前选定展品的动物名称及其id（exhibit_id是动物表中的外键，参考exhibit table中的exhibit_id）。当选择展品名称时，这将动态更改。我有第三个下拉列表，是从数据库中填充的动物名称和它们的ID，这些名称和ID没有分配给展览。这一切都在页面的初始加载时起作用。单击“添加”或“删除”按钮后，我的数据库将正确更新，但页面将继续加载。我原以为它会给出成功的信息，然后客户可以选择另一个展览，它会显示更新，但它没有到达那里。我一直在自学HTML、PHP和JS，所以代码非常松散。我正在使用我在网上找到的一些混合示例来获得动态下拉列表和从下拉列表中选择多个选项的能力，因此这可能是问题所在，因为我可以退出页面并返回，然后它将具有下拉列表，以及它们应该具有的值。我将感谢任何关于为什么会发生这种情况以及是否有任何修复的帮助。谢谢Javascript 带有web访问的Postgresql数据库-代码正确更新数据库，但重新加载网页需要很长时间,javascript,php,html,postgresql,Javascript,Php,Html,Postgresql,我有一个假设动物园的postgresql数据库。我正在使用php和一些javascript为我的数据库创建web访问。我已经成功地让大多数网页正常工作，但我现在正在开发一个允许客户从当前展品中添加和删除动物的页面。我有一个下拉列表，其中填充了数据库中的展品名称，第二个下拉列表从数据库中填充了分配给当前选定展品的动物名称及其id（exhibit_id是动物表中的外键，参考exhibit table中的exhibit_id）。当选择展品名称时，这将动态更改。我有第三个下拉列表，是从数据库中填充的动物
<?php
//Read database info from file and assgin to variables
$myfile = fopen("../pg_connection_info.txt", "r") or die("Unable to open \"../pg_connection_info.txt\" file!");
$my_host = fgets($myfile);
$my_dbname = fgets($myfile);
$my_user = fgets($myfile);
$my_password = fgets($myfile);
fclose($myfile);
// Make a connection to the database
$dbhost = pg_connect("host=$my_host dbname=$my_dbname user=$my_user password=$my_password");
// If the $dbhost variable is not defined, there was an error
if(!$dbhost)
{
die("Error: ".pg_last_error());
}
//Get exhibits from database
$query = "SELECT exhibit_id, name FROM exhibit";
$result = pg_query($dbhost, $query);
while($row = pg_fetch_row($result))
{
$categories[] = array("id" => $row[0], "val" => $row[1]);
}
//Get animals assigned to exhibits
$query2 = "SELECT animal_id, exhibit_id, name FROM animal";
$result2 = pg_query($dbhost, $query2);
while($row = pg_fetch_row($result2))
{
$subcats[$row[1]][] = array("id" => $row[0], "val" => $row[2]);
}
$jsonCats = json_encode($categories);
$jsonSubCats = json_encode($subcats);
?>
<html lang="en-us">
<head>
<title>Manage Animals/Exhibits</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type='text/javascript'>
<?php
echo "var categories = $jsonCats; \n";
echo "var subcats = $jsonSubCats; \n";
?>
//exhibit dropdown options
function loadCategories(){
var select = document.getElementById("exhibit");
select.onchange = updateSubCats;
var j = 0;
select.options[0] = new Option("--Select an option--");
for(var i = 0; i < categories.length; i++){
select.options[j + 1] = new Option(categories[i].val,categories[i].id);
j++;
}
}
//animals assigned to exhibits dropdown options
function updateSubCats(){
var catSelect = this;
var catid = this.value;
var subcatSelect = document.getElementById("animal");
subcatSelect.options.length = 0; //delete all options if any present
for(var i = 0; i < subcats[catid].length; i++){
subcatSelect.options[i] = new Option(subcats[catid][i].val + " - " + subcats[catid][i].id ,subcats[catid][i].id);
}
}
//Allows multiple selecting of dropdown items
window.onmousedown = function(e)
{
var el = e.target;
if(el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple'))
{
e.preventDefault();
if(el.hasAttribute('selected')) el.removeAttribute('selected');
else el.setAttribute('selected', '');
}
}
</script>
</head>
<body onload='loadCategories()'>
<h1>Add and Remove Animals from Exhibits</h1>
<form action="Manage_Animal_Exhibit.php" method="post">
<p>Select an exhibit to add or remove animal(s) from</p>
</select>
Exhibit: <select name="exhibit" id="exhibit">
</select><br><br>
<p>Current animals in exhibit:</p>
<select name="animal[]" id='animal' multiple>
</select><br><br>
<input type="submit" name="Remove" value="Remove"/><br><br>
<p>Current animals not assigned to an exhibit:</p>
<select name="animalAvail[]" id='animalAvail' multiple>
<?php
//get animals not in exhibit
$query3 = "SELECT name, animal_id FROM animal WHERE exhibit_id is NULL";
$result3 = pg_query($dbhost, $query3);
while($row = pg_fetch_row($result3)){
$name = $row[0];
$id = $row[1];
//Display animal's name and id in dropwdown. Assign id to the option so no need for an associative array
echo "<option value='$id'>$name - $id </option>";
}
?>
</select><br><br>
<input type="submit" name="Add" value="Add"/><br><br>
</form>
<!--Exits the Manage_Animal_Exhibit page and returns to the Home Page-->
<form action="Home_Page.php" method="post">
<input type="submit" name="Exit" value="Exit"/>
</form>
<?php
//When add button is pressed assign animals to exhibit
if(isset($_POST["Add"]))
{
//If exhibit isn't selected display message
if($_POST["exhibit"] == "--Select an option--")
{
echo "<script type='text/javascript'>alert('Select an exhibit')</script>";
}
else
{
$arr = array();
//Get each animal selected from dropdown and add their ID to an array
foreach($_POST["animalAvail"] as $animalID)
{
array_push($arr, "$animalID");
}
//Get id of exhibit selected and then add animals to exhibit
$exhibitID = $_POST["exhibit"];
$query4 = "UPDATE Animal SET exhibit_id = $1 WHERE animal_id = $2";
pg_prepare($dbhost, "prepare1", $query4);
for($i = 0; i < count($arr); $i++)
{
$idToUpdate = $arr[$i];
pg_execute($dbhost, "prepare1", array($exhibitID, $idToUpdate));
}
echo "<script type='text/javascript'>alert('The animals were added to the exhibit')</script>";
}
}
if(isset($_POST["Remove"]))
{
//If exhibit isn't selected display message
if($_POST["exhibit"] == "--Select an option--")
{
echo "<script type='text/javascript'>alert('Select an exhibit')</script>";
}
else
{
$arr2 = array();
//Get each animal selected from dropdown and add their ID to an array
foreach($_POST["animal"] as $aID)
{
array_push($arr2, "$aID");
}
$query5 = "UPDATE Animal SET exhibit_id = NULL WHERE animal_id = $1";
pg_prepare($dbhost, "prepare2", $query5);
for($i = 0; i < count($arr2); $i++)
{
$idUpdate = $arr2[$i];
pg_execute($dbhost, "prepare2", array($idUpdate));
}
echo "<script type='text/javascript'>alert('The animals were removed from the exhibit')</script>";
}
}
// Free the result from memory
pg_free_result($result);
// Close the database connection
pg_close($dbhost);
?>
</body>
</html>
管理动物/展品
//展示下拉选项
函数loadCategories（）{
var select=document.getElementById（“附件”）；
select.onchange=updateSubCats；
var j=0；
select.options[0]=新选项（“--select-an-Option-->”）；
对于（变量i=0；i
展品：
展品中的当前动物：
当前未分配给展览的动物：
我压缩了我的代码，能够立即加载网页。当按下“添加”和“删除”按钮时，问题出现在更新数据库的代码中。我有一个增强的for循环来获取所选的值并将它们添加到数组中，然后是一个for循环来更新数据库中的记录。我将其压缩为一个增强的for循环，该循环将获得选定的值并更新数据库。下面是我为add所做的一个示例。删除的格式相同
//When add button is pressed assign animals to exhibit
if(isset($_POST["Add"]))
{
//If exhibit isn't selected display message
if($_POST["exhibit"] == "--Select an option--")
{
echo "<script type='text/javascript'>alert('Select an exhibit')</script>";
}
else
{
//Get id of exhibit selected and then add animals to exhibit
$exhibitID = $_POST["exhibit"];
$query4 = "UPDATE Animal SET exhibit_id = $1 WHERE animal_id = $2";
pg_prepare($dbhost, "prepare1", $query4);
foreach($_POST["animalAvail"] as $animalID)
{
pg_execute($dbhost, "prepare1", array($exhibitID, $animalID));
}
echo "<script type='text/javascript'>alert('The animals were added to the exhibit'
</script>";
}
}
//按下“添加”按钮时，指定要展示的动物
如果（isset（$_POST[“Add”]））
{
//如果未选择展品，则显示消息
如果（$_POST[“exhibit”]=“--选择一个选项--”）
{
回显“警报（‘选择展品’）”；
}
其他的
{
//获取所选展品的id，然后将动物添加到展品中
$EXTABLAD=$_POST[“附件”]；
$query4=“更新动物集合展示标识=$1，其中动物标识=$2”；
pg_prepare（$dbhost，“prepare1”$query4）；
foreach（$_POST[“animalAvail”]作为$animalID）
{
pg_execute（$dbhost，“prepare1”，数组（$explad，$animalID））；
}
echo“警报（'动物被添加到展览中'
";
}
}