问题描述
我想根据我在下拉列表中选择的内容填充我的输入字段，这些文本是我的后端，我正在使用程序准备好的语句。我已经可以从下拉列表中检索数据，但是每当我单击/选择下拉数据时都无法填充字段
问题：我已经尝试过了，但是每当我尝试更改下拉菜单中的值时，它都不会更改输入字段。我尝试在网络中执行控制台并单击我的后端代码，但没有出现错误。
myforms.PHP
<form action="#" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="LabelTitle">Research Title</label>
<?PHP
// this is where my <select> and <option> tag data retrieves
include 'includes/includes_getoptionList.PHP';
?>
</div>
<div class="form-group">
<label for="LabelTitle">Research UID</label>
<input type="text" name="research_uid" class="form-control" id="research_uid" aria-describedby="emailHelp" placeholder="What is the title of the Research?" required="">
</div>
<div class="form-group">
<label for="LabelTitle">Research Tags</label>
<input type="text" name="researchTags" class="form-control" id="researchTags" placeholder="What is the type of this Research?" required="">
</div>
<div class="form-group">
<label for="LabelTitle">Research Timeline</label>
<input type="text" name="research_timeline" class="form-control" autocomplete="off" id="research_timeline" placeholder="What year was the research finished?" required="">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Research Description</label>
<textarea class="form-control" name="research_description" id="research_description" rows="8" required=""></textarea>
</div>
<div class="form-group">
<input type="submit" name="submit" id="btn-add" class="btn btn-primary form-control" value="ADD">
</div>
</form>
<!-- my js function -->
<script src="js/getdetails.js"></script>
getdetails.js
$(function(){
$('#research_title').on('change',function(){
$.ajax({
url: "includes/includes_getDetails.PHP",type: 'POST',data: {
research_title: $('#research_title').val()
},success: function(data){
researchData = JSON.parse(data);
$('#research_uid').val(researchData.research_uid);
$('#researchTags').val(researchData.researchTags);
$('#research_timeline').val(researchData.research_timeline);
$('#research_description').val(researchData.research_description);
},});
});
});
includes_getDetails.PHP
<?PHP
// check connection
if(isset($_POST)){
include 'connection_operation.PHP';
$research_title = $_POST["research_title"];
$sqlStatement = "SELECT research_uid,researchTags,research_timeline,research_description FROM tbl_topicresearch WHERE research_title = ?;";
$stmt = MysqLi_stmt_init($conn);
if (!MysqLi_stmt_prepare($stmt,$sqlStatement)) {
echo "sql Statement" . MysqLi_stmt_error($stmt);
} else {
MysqLi_stmt_bind_param($stmt,"s",$research_title);
MysqLi_stmt_execute($stmt);
$data = array();
$getResult = MysqLi_stmt_get_result($stmt);
while ($row = MysqLi_fetch_array($getResult,MysqLI_ASSOC)) {
$data[] = $row;
}
exit(json_encode($data));
}
}
?>
这是我的数据库。
这是回复
解决方法
您已在 AJAX 函数中设置 dataType: 'json'，然后在回调中调用 JSON.parse。您不需要设置 dataType - 事实上，保留它可能会导致错误，因为 jQuery 会自动处理 JSON 数据。
考虑以下演示 - 使用静态值制作，因为 select 菜单未知且无法测试您的 db/sql。
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' ){
$_POST['date']=date(DATE_ATOM);
$_POST['foo']='bar';
$_POST['research_uid']=uniqid();
$_POST['researchTags']='a,b,c,d,e,f,g,h';
$_POST['research_timeline']='first thing in the morning and last thing at night';
$_POST['research_description']='random nonsense in the form of adescription...';
exit(json_encode($_POST));
}
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title></title>
<script src='//code.jquery.com/jquery-latest.js'></script>
</head>
<body>
<form action="#" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="LabelTitle">Research Title</label>
<?php
// this is where my <select> and <option> tag data retrieves
//include 'includes/includes_getOptionList.php';
?>
<select id='research_title' name='research_title'>
<option value=1>One
<option value=2>Two
<option value=3>Three
</select>
</div>
<div class="form-group">
<label for="LabelTitle">Research UID</label>
<input type="text" name="research_uid" class="form-control" id="research_uid" aria-describedby="emailHelp" placeholder="What is the title of the Research?" required="">
</div>
<div class="form-group">
<label for="LabelTitle">Research Tags</label>
<input type="text" name="researchTags" class="form-control" id="researchTags" placeholder="What is the type of this Research?" required="">
</div>
<div class="form-group">
<label for="LabelTitle">Research Timeline</label>
<input type="text" name="research_timeline" class="form-control" autocomplete="off" id="research_timeline" placeholder="What year was the research finished?" required="">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Research Description</label>
<textarea class="form-control" name="research_description" id="research_description" rows="8" required=""></textarea>
</div>
<div class="form-group">
<input type="submit" name="submit" id="btn-add" class="btn btn-primary form-control" value="ADD">
</div>
</form>
<script>
$(function(){
$('#research_title').on('change',function(e){
$.ajax({
url: location.href,//"includes/includes_getDetails.php"
type: 'POST',data: {
research_title: $('#research_title').val()
},success: function(data){
researchData = JSON.parse(data);
$('#research_uid').val(researchData.research_uid);
$('#researchTags').val(researchData.researchTags);
$('#research_timeline').val(researchData.research_timeline);
$('#research_description').val(researchData.research_description);
}
});
});
});
</script>
</body>
</html>
当dataType:'json'
查看新添加的屏幕截图中的响应，它显示了一个简单的布尔值 true 而不是任何结构化数据。
include 'connection_operation.php';
$title = $_REQUEST['title'];
$sql = 'SELECT
research_uid,researchTags,research_timeline,research_description
FROM tbl_topicresearch
WHERE title = ?;';
$stmt=$conn->prepare($sql);
$stmt->bind_param('s',$title);
$stmt->execute();
$stmt->bind_result( $research_uid,$researchTags,$research_timeline,$research_description );
$data=array();
while($stmt->fetch())$data[]=array(
'research_uid' => $research_uid,'researchTags' => $researchTags,'research_timeline' => $research_timeline,'research_description' => $research_description
);
$stmt->free_result();
$stmt->close();
header('Content-Type: application/json');
exit(json_encode($data));
或者，使用 procedural 样式：
$data=array();
$getResult = mysqli_stmt_get_result($stmt);
while( $row=mysqli_fetch_array( $getResult,MYSQLI_ASSOC ) ){
$data[]=$row;
}
exit(json_encode($data));