使用 ajax 根据在下拉列表中选择的内容填充我的输入字段

Question

我想填充我的输入字段，这些字段是文本，具体取决于我在下拉列表中选择的内容，并且我正在为我的后端使用程序准备语句。我已经可以从下拉列表中检索数据，但是每当我 click/select 下拉列表数据

时，我都无法填充字段

问题：我已经尝试过了，但每当我尝试更改下拉菜单中的值时，它都不会更改输入字段。我尝试在网络中执行控制台并单击我的后端代码，它没有给我一个错误。

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));
}
}

?>

编辑：添加了参考 // 我希望这些添加的信息能有所帮助。

这是我的数据库。

这是回复

Answer 1

您已在 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));

使用 ajax 根据在下拉列表中选择的内容填充我的输入字段

Populating my input fields depending on what selected in dropdown using ajax

javascript

php

ajax

jquery

prepared-statement