如何使用 AJAX 将来自 mysql 的数据显示到文本字段中答案

【问题标题】：How to show data from mysql using AJAX into text field如何使用 AJAX 将来自 mysql 的数据显示到文本字段中
【发布时间】：2021-08-23 08:13:20
【问题描述】：

以前我不知道 ajax。所以我想问。我想将我的词表从 mysql 显示到一个文本字段中，但在数组中。这是 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: "view_ajax.php",
            dataType: "html",
            success: function(){
                $('').html();
            }
    
        });
    });
    });

</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, 
     array('wordlist'=>$row[0]));
     }
     
     echo json_encode(array('result'=>$result)); 
     mysqli_close($con);
    
    ?>

如果您能给出答案，我将非常有帮助。谢谢

【问题讨论】：

您的 dataType: "html" 应该是 dataType: "json" 。另外，在此处添加data 作为参数success: function(data){ 其中data 将包含来自您的服务器的返回响应。更改 data 的显示输出后，即：console.log(data).

标签： php jquery mysql ajax

【解决方案1】：

把你的 PHP 循环改成这样：

 $result = array(); 
 while($row = mysqli_fetch_array($res)){
    $result[]= $row[0];
 }
 echo json_encode(array('wordlist'=>$result));

然后，在你的 JS 中，见下文

$(document).ready(function() {
  $("#display").click(function() {
    /*$.ajax({    
            type: "GET",
            url: "view_ajax.php",
            dataType: "json",
            success: function(response){
                // use the code below in this area
            }
    
        });*/
    let response = {
      "wordlist": ["This", "is", "the", "return", "from", "your", "server"]
    } // this is what the response object will look like in your success function above

    let output

    // normal comma delimited response
    output = response.wordlist.join(",");

    // or if you want to keep the quotes
    output = JSON.stringify(response.wordlist);
    output = output.substr(1, output.length - 2);

    // use .val() to set the value of an input
    $('#wordlist').val(output);


  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

【讨论】：

感谢您的回答。但是在您的代码中，您声明了数组。如何从 MYSQL 获取结果数据？ $result = array(); while($row = mysqli_fetch_array($res)){ $result[]= $row[0]; } echo json_encode(array('wordlist'=>$result));
你已经在 process.php 中有这个。那是你应该用我给你的代码（你粘贴到最后一条评论中）更新的地方。这将从查询$sql = "select wordlist from word"; 构建数组并回显，以便您的$ajax 将其拾取
好的，我会试试的。感谢您的回复