在选择更改时用数据库数据填充输入


Populate input with database data on select change

我是HTML/Php/JavaScript世界的绝对初学者。我正在尝试制作这个页面:

  1. 包含文档标题的下拉列表
  2. 当选择某个内容时,用PostgreSQL中的数据填充下面的输入字段以允许更新
  3. 提交按钮,用用户的更正值更新数据库

1和3是可以的(已经尝试过使用仅插入表单)
我的代码如下(简化,没有dbconn):

echo "<select name='listedoc' size=1>";
while ($ligne = pg_fetch_array($result, null, PGSQL_ASSOC))
{
echo '<option value="'.$ligne['id_doc'].'">'.$ligne['doc_titre']. '</option>';
} 
echo "</select>";

输入字段(简化,实际上有4个字段):

<p><form name="saisiedoc" method="post" action="docupdins.php"></p>
<table border=0>
<tr><td>Texte</td>
<?php
echo '<td> <textarea name="content" cols="100" rows="30"></textarea> </td>';
?>
</tr><tr>
<td colspan=2>
<input type=submit value="Valider la saisie" name="maj"> </td>
</tr>
</table>
</form>'

然后JQuery脚本:

<script>
$(document).ready(function(){
$("select#listedoc").change(function () {
var id = $("select#listedoc option:selected").attr('value');
$.post("docsel.php", {id:id},function(data) {
});
});
</script>

要选择字段的php(docsel.php):

<?php 
include('../scripts/pgconnect.php');
$iddoc = $_POST['id'];
$sql="SELECT * FROM document where id_doc = $iddoc";
$result = pg_query($db, $sql);
if (!$result) {
  echo "ERREUR<br>'n";
exit;}
$row = pg_fetch_row($result);
$doctyp = $row[1];
$doctitre = $row[2]; 
$docauteur = $row[3];
$doccontent =$row[4];
pg_free_result($result);
pg_close($db);
}
?>

无论我做什么,我都无法找回价值观。我在输入中尝试了CCD_ 1,echo $doctitre无效。我的代码逻辑正确吗?感谢您的帮助

您已接近。脚本docsel.php需要将数据返回到html页面。您已经设置好在回调函数中接收数据

$.post("docsel.php", {id:id},function(data) { 
  $('textarea[name="content"]').text(data.content);
});

为了在data.content中包含一些内容,php脚本发送json数据:

$result = [];
$result['content'] = $doccontent;
echo json_encode($result);

也许您需要阅读$.post和json_encode上的文档。。。祝你好运

这里有几点需要更改。

首先,也是最重要的一点,你的docsel.php脚本有一个巨大的安全漏洞。您永远不应该永远将未初始化的输入(例如直接来自用户的输入)直接放入SQL查询中,因为它允许SQL注入。从本质上讲,SQL注入允许恶意用户结束程序员的查询并提交自己的查询。为了绕过这一点,您必须清除任何用户输入——因此在这种情况下,在将用户输入放入查询之前,请通过函数pg_escape_tliteral()传递用户输入。

其次,docsel.php脚本必须为AJAX请求提供某种输出。您可以使用echo来实现这一点,我建议您将其编码为JSON。代码示例:

$return_vals = array("doctype" =>  $doctyp, "doctitle" => $doctitre, "docauthor" => $docauteur, "doccontent" => $doccontent);
echo json_encode(array("document" => $return_vals));

最后,在jQuery脚本中,您实际上并没有对AJAX发布请求返回的数据执行任何操作。在回调函数中,您需要将返回的字段添加到选择下拉列表中。代码示例:

<script>
     $(document).ready(function(){
     $("select#listedoc").change(function () {
          var id = $("select#listedoc option:selected").attr('value');
          $.post("docsel.php", {id:id},function(data) {
               //FILL THE DROPDOWN HERE
               $(data).each(function(elem) {
                    $("#dropdown-id").append("<option value='" + elem.doctitle + "'>" + elem.doctitle + "</option>");
               }); 
          }, "json");
     });
</script>

这是一个沉默而迂腐的观点,但在请求内容时,应该使用GET而不是POST。