在点击获取从MySQL加载到表 [英] On click get from mysql load into table

问题描述

当用户单击提交"按钮时，我能够将5种表单中的数据输入到mysql中.

I was able to input the data from 5 forms into mysql when the user clicks the submit button.

现在，我想在用户单击其他按钮时在表中显示数据.我知道我需要使用Ajax和Php，但是我找不到适合我的示例.

Now, I want to display the data in a table when the user clicks a different button. I know I need to use Ajax and Php, but I haven't been able to find an example that was clear to me.

下面是我的部分代码.我没有包含用于将表单数据发布到数据库的javascript和php.如果可以帮助您理解，我可以添加它.

Part of my code is below. I didn't include the javascript and php I used to post the form data to the database. If that would help you understand, I can add it.

input.html

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

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

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();
?>

推荐答案

需要表格的HTML创建一个基本表格元素以将数据插入其中.

HTML where table is required create a basic table element to insert your data into.

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

PHP而不是回显每一行，而是创建一个返回数组，然后打印该数组以json编码.

PHP rather than echoing out each line create a return array, then print that array json encoded.

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

print(json_encode($return));

JS成功函数中的

JS调用迭代返回的json并创建一个新的html变量.然后，使用该新变量设置您在上面的HTML部分中创建的表的html.

JS in the success function of the js call iterate through the returned json and create a new html variable. Then set the html of the table you created in the HTML portion above with that new variable.

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

这一切都是我的头顶，未经测试，但假设您的所有其他函数都返回了应该起作用的正确数据.

This is all off the top of my head and untested, but assuming all your other functions return the correct data it should work.

根本没有错误处理，基本上我通常要做的是代替仅返回$ return，而是将所有数据放入$ return ["data"]数组中，然后使用PHP函数错误返回$ return ["error"]，然后在js中代替if(data)可以执行if(data.error！=")或类似的操作.

There is no error handling at all, basically to do that what I normally do is instead of returning just $return, I'll put all the data in a $return["data"] array, then if the PHP function errors return a $return["error"], and then in the js instead of if(data) you can do if(data.error !="") or something similar.

这篇关于在点击获取从MySQL加载到表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！