클릭하면 mysql을 테이블로 가져 오기

Question

사용자가 제출 버튼을 클릭하면 mysql에 5 가지 형식의 데이터를 입력 할 수있었습니다.

이제 사용자가 다른 버튼을 클릭 할 때 테이블에 데이터를 표시하려고합니다. Ajax와 PHP를 사용해야한다는 것을 알고 있지만, 나에게 명확한 예제를 찾을 수 없었다.

내 코드의 일부가 아래에 있습니다. 나는 자바 스크립트와 PHP를 포함하지 않았다. 나는 폼 데이터를 데이터베이스에 게시하는 데 사용했다. 이해가 도움이된다면 추가 할 수 있습니다.

input.html

<div class="container"> 
<form action="vocab_input.php" method="post" id="input_form"> 
<label>Word:</label> 
    <input type="text" name='word'> 

    <label>POS:</label> 
    <input type="text" name='pos'> 

    <label>Translation:</label> 
    <input type="text" name='trans'> 

    <label>Definition:</label> 
    <input type="text" name='definition'> 

    <label>Sentence:</label> 
    <input type="text" name='sen'> 

    <input type="submit"> 

</form> 
</div> 

<div class="btn-group btn-group-justified" role="group" aria-label="..." style="margin-top: 50px;"> 
    <div class="btn-group" role="group"> 
    <button type="button" class="btn btn-default" id="list">Vocab List</button> 
    </div> 
</div> 

<-- I want the table displayed here when user clicks the list button --> 

get_input.js

$(function() { 
    $('#list').on('click', function(e) { 
     var data = $("#list :input").serialize(); 
     $.ajax({ 
      type: "GET", 
      url: "get_input.php", 
      data: data, 
     }); 
     e.preventDefault(); 
    }); 
}); 

get_input.php

<?php 

$servername = "localhost"; 
$username = "username"; 
$password = "password"; 
$dbname = "dbname"; 

$conn = new mysqli($servername, $username, $password, $dbname); 

if ($conn->connect_error) { 
    die("Connection failed: " . $conn->connect_error); 
} 

$sql = "SELECT * FROM user_input"; 
$result = $conn->query($sql); 

while ($row = mysql_fetch_array($result)) { 
    echo '<tr>'; 
    foreach($row as $field) { 
     echo '<td>' . htmlspecialchars($field) . '</td>'; 
    } 
    echo '</tr>'; 
} 

$conn->close(); 
?> 

Answer 1

HTML 테이블이 필요한 곳에 데이터를 삽입하기위한 기본 테이블 요소를 만듭니다.

<table id="mydata"></table> 

PHP는 각 줄을 반향하여 리턴 배열을 작성하지 않고 json 인코딩으로 인쇄합니다.

$return = array() 
while ($row = mysql_fetch_array($result)) { 
    foreach($row as $field) { 
     $return[] = '<td>' . htmlspecialchars($field) . '</td>'; 
    } 
} 

print(json_encode($return)); 

JS js 호출 성공 함수에서 반환 된 json을 통해 iterate를 호출하고 새 html 변수를 만듭니다. 그런 다음 위의 HTML 부분에서 작성한 테이블의 html을 새 변수로 설정하십시오.

$(function() { 
    $('#list').on('click', function(e) { 
     var data = $("#list :input").serialize(); 
     $.ajax({ 
      type: "GET", 
      url: "get_input.php", 
      data: data, 
      dataType: "json", 
      success: function(data) { 
       var html; 
       if(data) { 
       for(var i=0; i < data.length; i++) { 
        html += "<tr>data[i]</tr>"; 
       } 
       $("#mytable").html(html); 
       } 
      } 
     }); 
     e.preventDefault(); 
    }); 
}); 

이것은 내 머리 꼭대기에서 떨어져 있고 테스트되지 않았지만, 다른 모든 함수가 올바르게 작동해야한다고 가정하면.

기본적으로 내가하는 일은 기본적으로 $ return을 반환하는 대신 모든 데이터를 $ return [ "data"] 배열에 넣을 것이고, PHP가 함수 오류는 $ return [ "error"]를 반환 한 다음 js 대신에 (data.error! = "") 또는 이와 유사한 경우 (data) 대신 할 수 있습니다.