функция поиска с JQuery AJAX - PullRequest
Новая
       1

функция поиска с JQuery AJAX

0 голосов
/ 31 августа 2018

Итак, я разрабатываю поисковую функцию для серверной части сайта и делаю это с 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 предназначена для сбора данных, их помещения в таблицу и отображения этой таблицы в каждом элементе таблицы 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-файлы работать вместе.

Кто-нибудь знает, где моя проблема?

edit: Я подумал, что я просто добавлю функцию на случай, если проблема там будет 

  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);
}

Ответы [ 2 ]

0 голосов
/ 31 августа 2018

Ваша форма отправляется, поскольку у вас есть входные данные, и она не выполняет никаких действий, поэтому она обновляется.

Вы можете изменить свою форму на 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>
0 голосов
/ 31 августа 2018

Вам не нужно использовать форму с AJAX.

Если вы замените форму на div, это решит проблему.

Когда вы «отправляете» форму, она пытается разместить данные где-то.

Поскольку вы не указали URL-адрес, он перезагружается.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...