带有 JQuery AJAX 的搜索功能答案

【问题标题】：searchfunction with JQuery AJAX带有 JQuery AJAX 的搜索功能
【发布时间】：2018-08-31 11:33:29
【问题描述】：

所以我为网站的后端设计了一个搜索功能，并且我使用 AJAX 这样做。

到目前为止，如果您按下“成员”按钮，它会从数据库中获取相关信息并在表格中显示成员。到目前为止，一切都很好。

现在我在显示表格的 div 上方添加了一个表单：

    <form id="searchmember" method="post">
        <input type="text" name="searchm" placeholder="Look for a Member!"/>
        <input id="search" type="submit" value=">>" name="search"/>
    </form>

    <div id="eachTable">

并在我的 JQuery 中添加了一个函数，该函数会在按下“搜索”按钮时做出反应：

$("#search").click(function(){   
  if(ifIssetData == 1){
    var searchm = $('input[name="searchm"]').val();
    $.post('/website/administrator/components/com_backend/searchPerson.php', 'val=' + $(searchm).val());

    $.ajax({
      async:   true,
      dataType: 'json',
      url: '/website/administrator/components/com_backend/searchPerson.php',

      error: function(data2, error2, errorThrown2){
        alert(JSON.stringify(data2));  
        alert(error2);
        alert(errorThrown2); 
      }, 

      success: function(data2,status)
      {
        createTableByJqueryEach2(data2);
      },
    });

createTable 函数旨在获取数据，将其放入表中并在 eachTable div 中显示该表。

所以你会看到它将 searchm 发布到发生以下情况的 php 文件中：

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

    $searchtrue = $_POST['val'];

    $query = "SELECT Titel, Vorname, Nachname, Unternehmen, Gruppe FROM mitglieder WHERE Titel LIKE '%$searchtrue%' OR Vorname LIKE '%$searchtrue%' OR Nachname LIKE '%$searchtrue%' OR Unternehmen LIKE '%$searchtrue%' OR Gruppe LIKE '%$searchtrue%'";

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

    $searchresult = filterTable($query) or die("Tabelle kann nicht angezeigt werden");

    $data2 = mysqli_fetch_all($searchresult);
    echo json_encode($data2);
?>

现在您有了代码，即问题。当我按下“搜索”按钮时，页面只是重新加载，没有任何反应。我假设 PHP 文件没有收到 POST？但为什么？ html 非常简单，所以我确信它有效。 PHP 应该工作，但我不确定，因为我总是很难让 JQuery 和 PHP 文件一起工作。

有人知道我的问题在哪里吗？

编辑：我想我只是添加功能以防问题出现

  function createTableByJqueryEach2(data2)
  {

  var eTable2="<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>"
  $.each(data2,function(index2, row2){
    // eTable += "<tr>";
    // eTable += "<td>"+(data2)[i]['Titel']+"</td>";
    // eTable += "<td>"+(data2)[i]['Vorname']+"</td>";
    // eTable += "<td>"+(data2)[i]['Name']+"</td>";
    // eTable += "<td>"+(data2)[i]['Unternehmen']+"</td>";
    // eTable += "<td>"+(data2)[i]['Gruppe']+"</td>";
    // eTable += "</tr>";

    eTable2 += "<tr>";
    $.each(row2,function(key2,value2){
      eTable2 += "<td>"+value2+"</td>";
    });
    eTable2 += "</tr>";
  });
  eTable2 +="</tbody></table>";
  $('#eachTable').html(eTable2);
}

【问题讨论】：

为什么要向同一个 url 发出两个 ajax 请求？
我对 JQuery 很陌生。就像上周的星期五一样新。所以我做了这个帖子，但不知道 PHP 文件是否正在返回表格并从首先显示表格的函数中复制粘贴的 n。我可以只删除第二次访问 PHP 文件吗？

标签： php jquery html sql ajax

【解决方案1】：

您的表单正在提交，因为您有一个提交输入，并且它没有任何操作，所以它正在重新定义。

您可以将表单更改为 div 或使用：

$(document).ready(function() {
    $('#searchmember').on('submit', function(e){
        e.preventDefault();
    });
});

另外，我创建了这个文件，它运行良好：

   <!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <form id="searchmember" method="post">
        <input type="text" name="searchm" placeholder="Look for a Member!"/>
        <input id="search" type="submit" value=">>" name="search"/>
    </form>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#searchmember').on('submit', function(e){
                e.preventDefault();
            });
        });


        $("#search").click(function(e){
            var ifIssetData= 1;
            if(ifIssetData == 1){
                var searchm = $('input[name="searchm"]').val();        
$.post('/website/administrator/components/com_backend/searchPerson.php', 'val=' + $(searchm).val());
                $.ajax({
                    async:   true,
                    dataType: 'json',
                    url: '/website/administrator/components/com_backend/searchPerson.php',

                    error: function(data2, error2, errorThrown2){
                        alert(JSON.stringify(data2));
                        alert(error2);
                        alert(errorThrown2);
                    },

                    success: function(data2,status)
                    {
                        createTableByJqueryEach2(data2);
                    }
                });
            }
        });
    </script>

    </body>
    </html>

【讨论】：

我用 div 替换了表单，现在又遇到了新问题。请参阅我对上述答案的评论。知道那可能是什么吗？
我在答案中添加了你的代码，我声明了你的ifIssetData= 1;，因为它没有声明
不，控制台是干净的
是的，复制粘贴它，它是一样的。按钮有点“保持按下状态”，没有任何反应。当我按下按钮外的东西时，按钮会“未按下”
我很确定您的错误在您的 php 文件中。保持这种方式<?php echo "return"; return; ?> 或者只是把它放在第一行

【解决方案2】：

您不需要通过 AJAX 使用表单。

如果将表单替换为 div 即可解决问题。

当您“提交”表单时，它会尝试将数据发布到某处。

由于您没有提供 URL，它会重新加载。

【讨论】：

我已将其替换为 div 并删除了 method="post"。现在它卡住了。我按下提交按钮，没有任何反应。我还尝试用 type="button" 替换输入标签中的 type="submit" 但它仍然卡住了。似乎它发送了一些东西但没有得到任何回报？或者，也许我的 Query 做错了什么，它只是取回了整个表？这可能是什么问题？