Question

我有一个ajax调用，此时只是用于测试目的的第一个名称，使用bootstrap模式更改了联系人。成功后，我希望刷新页面数据，但不要实际重新加载页面。因此，一旦用户单击保存更改，模式将消失，表数据将刷新并更新名称。这是我到目前为止所获得的代码：

<?php

$db = new mysqli('127.0.0.1', 'root', '', 'test');

require_once 'Model.php';
require_once 'Contact.php';

$contacts = Contact::find_all();

?>
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <title>Test</title>

    <script>
        $(document).ready( function() {
            $("button").click(function() {
                var clicked = this.id;

                $.ajax({
                    url:      'edit.php',
                    dataType: 'json',
                    data: {
                        action: "display",
                        id: this.id
                    },
                    success:  function(data) {
                        $("#fname").val(data.first_name);

                        $("#save").click(function() {
                            $.ajax({
                                url:      'edit.php',
                                dataType: 'json',
                                data: {
                                    action: "save",
                                    id: clicked,
                                    first_name: $("#fname").val()
                                },
                                success:  function(data) {
                                    console.log(data);
                                    //refresh page here
                                }
                            });
                        });
                    }
                });
            });
        });
    </script>
</head>
<body>
<table class="table table-striped" id="table">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
            <th>Edit</th>
        </tr>
    </thead>
    <tbody>
    <?php foreach($contacts as $contact): ?>
        <tr>
            <td><?php echo $contact->first_name ?></td>
            <td><?php echo $contact->last_name ?></td>
            <td><?php echo $contact->email ?></td>
            <td>
                <button type="button" class="btn btn-primary btn-lg" name="" id="<?php echo $contact->id ?>" data-toggle="modal" data-target="#myModal">
                    Edit Contact
                </button>
            </td>
        </tr>
    <?php endforeach; ?>
    </tbody>
</table>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <input type="text" name="fname" id="fname">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" id="save" class="btn btn-primary save" data-dismiss="modal">Save changes</button>
            </div>
        </div>
    </div>
</div>

<script>
</script>

</body>
</html>

你可能会说我对AJAX和JS / jQuery很新。

Answer 1

您需要“动态”创建表格，一个数据从AJAX调用返回 - 这发生在$ .ajax（）调用的success选项中指定的回调函数上。现在，您只需显示在控制台上返回的数据。你需要清除你的内容（通过调用例如$('tbody').html('')），然后根据“data”参数中的数据创建一个表内的approriate结构... 您可能希望在JQuery文档中查找的有用方法可能是：

.each()
.append()
.html()

希望以上有帮助：）

如何刷新页面数据以显示使用ajax调用更改的动态表数据而不重新加载页面？

1 个答案: