Question

我想在单击按钮时显示来自Mysql数据库的数据。为此，我使用AJAX。

我使用了this教程，这是我想要达到的目标的90％。可悲的是，在此示例中，数组是硬编码的，我使用数据库中的数据构造了数组。

因此，我复制并粘贴了该教程，并在我的网站上逐步创建了该教程。但是我在最后一步上失败了。当我使用由mysqli_query函数创建的数组时，“说”正在处理时，“提交”按钮将无限期加载。

这里是JQuery：

$(document).ready(function(){
    $("#personen").click(function(){
      //disable the submit button
      $(this).attr('disabled','true');
      $(this).css('cursor','progress');
      $(this).html('processing');
      $.ajax({
        url: '/widenmoos/administrator/components/com_backend/Personen_AJAX.php',
        error: function(data, error, errorThrown){
          alert(error);
          alert(errorThrown);  
        },
        success: function(data,status)
        {
          createTableByForLoop(data);
          createTableByJqueryEach(data);
          //enable the submit button
          $('#personen').css('cursor','pointer');$('#personen').html('Submit');$('#personen').removeAttr('disabled');
        },
        async:   true,
        dataType: 'json'
      }); 
    });
  });

  function createTableByForLoop(data)
  {
    var eTable="<table><thead><tr><th colspan='5'>Created by for loop</th></tr><tr><th>Titel</th><th>Vorname</th><th>Name</th><th>Unternehmen</th><th>Gruppe</th</tr></thead><tbody>"
    for(var i=0; i<data.length;i++)
    {
      eTable += "<tr>";
      eTable += "<td>"+String(data)[i]['Titel']+"</td>";
      eTable += "<td>"+String(data)[i]['Vorname']+"</td>";
      eTable += "<td>"+String(data)[i]['Name']+"</td>";
      eTable += "<td>"+String(data)[i]['Unternehmen']+"</td>";
      eTable += "<td>"+String(data)[i]['Gruppe']+"</td>";
      eTable += "</tr>";
    }
    eTable +="</tbody></table>";
    $('#forTable').html(eTable);
  }

  function createTableByJqueryEach(data)
  {


    var eTable="<table><thead><tr><th colspan='5'>Created by Jquery each</th></tr><tr><th>Titel</th><th>Vorname</th><th>Name</th><th>Unternehmen</th><th>Gruppe</th</tr></thead><tbody>"
    $.each(data,function(index, row){
      // eTable += "<tr>";
      // eTable += "<td>"+String(data)[i]['Titel']+"</td>";
      // eTable += "<td>"+String(data)[i]['Vorname']+"</td>";
      // eTable += "<td>"+String(data)[i]['Name']+"</td>";
      // eTable += "<td>"+String(data)[i]['Unternehmen']+"</td>";
      // eTable += "<td>"+String(data)[i]['Gruppe']+"</td>";
      // eTable += "</tr>";

      eTable += "<tr>";
      $.each(row,function(key,value){
        eTable += "<td>"+value+"</td>";
      });
      eTable += "</tr>";
    });
    eTable +="</tbody></table>";
    $('#eachTable').html(eTable);
  }

这里是硬编码的数组：

<?php 

    header("Content-type: application/json");
    $employees = 
    array(
            array
            (
            "Titel" => "Jack",
            "Vorname" => "Magager",
            "Name" => "$60,000",
            "Unternehmen" => "oaisjd",
            "Gruppe" => "dajskdj",
            ),

            array
            (
                "Titel" => "Jack",
                "Vorname" => "Magager",
                "Name" => "$60,000",
                "Unternehmen" => "oaisjd",
                "Gruppe" => "dajskdj",
            ),

            array
            (
                "Titel" => "Jack",
                "Vorname" => "Magager",
                "Name" => "$60,000",
                "Unternehmen" => "oaisjd",
                "Gruppe" => "dajskdj",
            )
        );

    echo json_encode($employees);
?>

这是从我的数据库条目派生的数组：

<?php    
    echo json_encode($employees);

    include($_SERVER['DOCUMENT_ROOT'].'/website/dbConnection.php');
    header("Content-type: application/json");

    function filterTable($searchquery)  
    {   
        $filter_Result = mysqli_query($GLOBALS['connect'], $searchquery);
        return $filter_Result;
    }

    $searchquery = "SELECT Titel, Vorname, Name, Unternehmen, Gruppe FROM mitglieder"
    $searchresult = filterTable($searchquery) or die("Tabelle kann nicht angezeigt werden");

    echo json_encode($searchresult);

?>

看看当我print_f数组时，它们都是一样的，只是有更多的条目

但是，一旦我将硬编码数组替换为另一个数组，提交按钮便会继续加载。

最后，那里有一些德语单词。抱歉但是它们非常简单：

标题->标题

姓氏->名字

名称->名称

Unternehmen->公司

人员->人员

有人知道怎么回事吗？

Picture with better readable arrays

编辑了我的代码，现在我知道更多了，但是仍然失败。您可以找到旧的JQuery代码所在的位置。

我将其转换为字符串。但是我不确定自己是否做得对，所以我喜欢反馈。我还添加了一个“错误”参数。它给出“ parsererror”和“ SyntaxError：JSON中位置1处的意外令牌P”。我不知道在哪里或如何固定第二个，甚至在谷歌搜索它的含义后也不太了解第一个。有人知道了吗？

Answer 1

弄清楚了伙计们！

通常是这样。最困难的问题是缺少分号。

在我之前的PHP代码中：

$searchquery = "SELECT Titel, Vorname, Name, Unternehmen, Gruppe FROM mitglieder"

现在在我的PHP代码中：

$searchquery = "SELECT Titel, Vorname, Name, Unternehmen, Gruppe FROM mitglieder";

它仍然不能正常工作，但是现在控制台中出现错误，我会尝试自己解决。感谢所有试图帮助我的人！

Answer 2

你可以试试吗？

<?php     
include($_SERVER['DOCUMENT_ROOT'].'/website/dbConnection.php');


function filterTable($searchquery)  
{   
    $filter_Result = mysqli_query($GLOBALS['connect'], $searchquery);
    return $filter_Result;
}

$searchquery = "SELECT Titel, Vorname, Name, Unternehmen, Gruppe FROM mitglieder";
$searchresult = filterTable($searchquery) or die("Tabelle kann nicht angezeigt werden");

header('Content-type: application/json; charset=utf-8');
echo json_encode($searchresult);

?>

另一个试用版，只需为其创建一个新的html

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<button id="personen" type="button">personen</button> 
<div id="forTable" style="height: 800px; min-width: 310px"></div>


<script>
$(document).ready(function(){
$("#personen").click(function(){
  //disable the submit button
  $(this).attr('disabled','true');
  $(this).css('cursor','progress');
  $(this).html('processing');
  $.ajax({
      url: '/widenmoos/administrator/components/com_backend/Personen_AJAX.php',
    error: function(data, error, errorThrown){
      alert(error);
      alert(errorThrown);  
    },
    success: function(data,status)
    {
    console.log("Data contains: " + data.length + " elements, which are");
    for(var i=0; i<data.length;i++)
        {
                console.log(data[i]);
        }
      createTableByForLoop(data);

      //enable the submit button
      $('#personen').css('cursor','pointer');$('#personen').html('Submit');$('#personen').removeAttr('disabled');
    },
    async:   true,
    dataType: 'json'
  }); 
});
});

  function createTableByForLoop(data)
  {
    var eTable="<table><thead><tr><th colspan='5'>Created by for loop</th></tr><tr><th>Titel</th><th>Vorname</th><th>Name</th>        <th>Unternehmen</th><th>Gruppe</th</tr></thead><tbody>"
for(var i=0; i<data.length;i++)
{
  eTable += "<tr>";
  eTable += "<td>"+data[i]['Titel']+"</td>";
  eTable += "<td>"+data[i]['Vorname']+"</td>";
  eTable += "<td>"+data[i]['Name']+"</td>";
  eTable += "<td>"+data[i]['Unternehmen']+"</td>";
  eTable += "<td>"+data[i]['Gruppe']+"</td>";
  eTable += "</tr>";
}
eTable +="</tbody></table>";
$('#forTable').html(eTable);
  }
</script>

使用数据库时无限期加载JQuery AJAX提交按钮

2 个答案: