如何使用AJAX将MySQL中的wordlist数据以数组形式展示到文本框

核心修改点 #

• 修正AJAX请求地址：你后端处理文件为process.php，前端原代码中请求的view_ajax.php与实际文件不匹配，需调整为正确路径
• 修改响应数据类型：后端返回JSON格式数据，需将dataType从html改为json
• 补充回调逻辑：在success回调中接收响应数据，提取wordlist数组后填充到目标文本框中

修改后的前端代码（index.php） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
</head>
<body>
<div class="container" >
<h2>View data</h2>
<h4>Word List : </h4>

        <div class="form-group">
        <input id="wordlist" type="text" class="form-control" name="wordlist">
        </div><br>
        <button id="display" title="Generate Word">Generate</button>
        <div class="input-single">
        </div>

    <script type="text/javascript">
    
     $(document).ready(function() {
    
        $("#display").click(function() {
          $.ajax({    
            type: "GET",
            url: "process.php", // 改为实际的后端文件路径
            dataType: "json", // 改为json类型适配后端返回格式
            success: function(res){
                // 提取所有wordlist内容生成数组
                let wordArr = res.result.map(item => item.wordlist)
                // 转为字符串填充到文本框，你也可以按需求调整展示格式
                $('#wordlist').val(JSON.stringify(wordArr))
            }
        });
    });
    });

</script>

可选后端优化（process.php） #

可以简化返回结构，减少前端处理逻辑，修改后代码如下：

<?php
$host = "localhost";
$user = "root";
$password = ""; 
$dbname = "posts";

    $con = mysqli_connect($host, $user, $password, $dbname);
    if (!$con) {
     die("Connection failed: " . mysqli_connect_error());
    }
    
    $sql = "select wordlist from word"; 
    
     $res = mysqli_query($con,$sql); 
     $result = array(); 
     while($row = mysqli_fetch_array($res)){
        // 直接存入字符串，不需要嵌套关联数组
        array_push($result, $row[0]);
     }
     
     echo json_encode($result); 
     mysqli_close($con);
    
?>

如果使用优化后的后端代码，前端success回调可以简化为：

success: function(res){
    $('#wordlist').val(JSON.stringify(res))
}

内容的提问来源于stack exchange，提问作者ercy