Question

因此，我为网站的后端设计了搜索功能，而我使用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);
}

Answer 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>

Answer 2

您不需要在AJAX中使用表单。

如果将表格替换为div，它将解决此问题。

“提交”表单时，它将尝试将数据发布到某个地方。

由于您未提供网址，因此会重新加载。

带有JQuery AJAX的searchfunction

2 个答案: