迭代ajax响应数据是单独打印字母而不是整个单词答案

【问题标题】：Iterating ajax response data is printing letters individually instead of whole words迭代ajax响应数据是单独打印字母而不是整个单词
【发布时间】：2020-10-10 02:23:56
【问题描述】：

我正在尝试从 PHP 文件中获取字符串数组，以便可以在我的 javascript 文件中使用它。我能够在我的 javascript 中访问它（$namelist），但是每当我尝试打印它时，数组中的字符串都会打印为单独的字母，就像每个单词的每个字母都有自己的索引.

我不想要这个。我想在一行上打印整个单词。在这个模型中，应该只打印出两个单词。（hakim 和 henry）

var letters = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
const dir = "./submissions/";
// const fs = require('fs');
var extensions = [".jpg",".png"];
    for( var i = 0; i < letters.length;i++){
      var node = document.createElement("li");
      var button = document.createElement("input");
      var textnode = document.createTextNode(letters[i]);
      button.type = "button";
      button.className = letters[i];
      button.value = letters[i];
      button.setAttribute('onclick',"thisfunction(this,'one')");
      button.appendChild(textnode);
      node.appendChild(button);
      document.getElementById('letters').appendChild(node);
    }

    function thisfunction(obj,abc){
      var letterclass = obj.className;
      $.post('php/loadnames.php',{postname:letterclass},
      function(data){
        for(const child of data){
          var node = document.createElement("li");
          var link = document.createElement("a");
          var textnode = document.createTextNode(child);
          link.href = '#';
          link.appendChild(textnode);
          node.appendChild(link);
          document.getElementById('buddy_load').appendChild(node);
        }

PHP/加载名称：

<?php
$namelist = array();
$name = $_POST['postname'];
$path = '../submissions';
$files=scandir($path);
foreach($files as &$value){
  if(strtolower(substr($value,0,1)) == strtolower($name)){
    array_push($namelist, strtolower(strtok($value,'_')));
  }
  // echo strtolower(substr($value,0,1));
}
$namelist = array_unique($namelist);
// echo count($namelist);
// $namelist = sort($namelist);
$keys = implode($namelist );
  // echo implode(',',$namelist);
  echo $keys;
?>

【问题讨论】：

标签： javascript php ajax loops

【解决方案1】：

您正在向 ajax 调用返回一个字符串类型的值。因此，您的 for 循环正在迭代单独字符串的偏移量/字符。我建议将平面数组数据作为 json 编码字符串传递给 ajax 调用，以便它可以迭代每个元素并将名字显示为单独的链接。

此外，我还有一些技巧要分享。

您没有向服务器/数据库写入任何数据（您只是在获取数据），因此使用get 而不是post 更合适。这意味着使用$.get 或$.ajax。
在您的 php.ini 中使用之前验证传入的值。如果无效，返回不满意的东西。
我通常使用glob() 来搜索我的文件系统。它非常通用，并且对这项任务有一个有用的功能，您可以使用它的大括号语法来动态过滤搜索。无论如何，scandir() 对这项任务来说不一定是坏事，因为无论如何您都在修剪文件名中的前导子字符串。（为了记录，我可能会使用 glob() 的组合，然后重复调用 strstr()。）
preg_filter() 是我很少使用的功能，但似乎适合此任务。它不仅尝试改变它遇到的每个值，它还丢弃它不能改变的值（因为不满足模式）。

代码：(Demo)

$files = [
    'Hakim_123.txt',
    'Mick_MacKusa.jpg',
    'henry_rollins.gif',
    'Z_zzz_zzz_zzz.csv'
];
$_GET['postname'] = 'H';

if (!preg_match('~^[A-Z]$~', $_GET['postname'] ?? '')) {
    exit('[]');
}

exit(
    json_encode(
        array_values(
            array_unique(
                preg_filter(
                    '~^' . lcfirst($_GET['postname']) . '[^_]*\K_.*~',
                    '',
                    array_map('strtolower', $files)
                )
            )
        )
    )
);

输出：

["hakim","henry"]

要在您的 jquery 中使用此 json 字符串，请遵循 Parse JSON from JQuery.ajax success data 的建议。

【讨论】：