php - 如何在不重新加载页面的情况下进行实时

Question

你好如何使ajax实时？当有人在其他平台插入数据时，我想让我的代码实时显示数据自动显示而无需重新加载页面，这可能吗？在不重新加载页面的情况下获取所有新数据？并提前感谢你们希望你们帮助我我使用 ajax 和 jquery 和 codeigniter 框架

<script type="text/javascript" language="javascript">
    $(document).ready(function() {

        function fetch_data() {
            $.ajax({
                url: "http://localhost/codeigniter/api/fetchUserData",
                method: "POST",
                success: function(data) {
                    let output = "";
                    JSON.parse(data).map((user) => {
                        output = output + `
                        <tr>
                            <td>${user.first_name}</td>
                            <td>${user.last_name}</td>
                            <td><button class="edit" id="${user.id}">Edit</button></td>
                            <td><button class="delete" id="${user.id}">delete</button></td>
                        </tr>`
                    })

                    $('tbody').html(output);
                }
            });
        }

        fetch_data();
    
       

        $('#add_button').click(function() {
            $('#user_form')[0].reset();
            $('.modal-title').text("Add User");
            $('#action').val('Add');
            $('#data_action').val("Insert");
            $('#userModal').modal('show');
        });

        $(document).on('submit', '#user_form', function(event) {
            event.preventDefault();
            const action = $("#data_action").val();
            console.log("Action: ", action)
            $.ajax({
                url: `http://localhost/codeigniter/api/${action === "Insert" ? "insert" : "updateUser"}`,
                method: "POST",
                data: $(this).serialize(),
                dataType: "json",
                success: function(data) {
                    if (data.success) {
                        $('#user_form')[0].reset();
                        $('#userModal').modal('hide');
                        fetch_data();
                        if ($('#data_action').val() == "Insert") {
                            $('#success_message').html('<div class="alert alert-success">Data Inserted</div>');
                        }
                    }

                    if (data.error) {
                        $('#first_name_error').html(data.first_name_error);
                        $('#last_name_error').html(data.last_name_error);
                    }
                }
            })
        });

        $(document).on('click', '.edit', function() {
            var user_id = $(this).attr('id');
            console.log("User Id:", user_id)
            $.ajax({
                url: "http://localhost/codeigniter/api/fetch_single",
                method: "POST",
                data: {
                    id: user_id
                },
                dataType: "json",
                success: function(data) {
                    $('#userModal').modal('show');
                    $('#first_name').val(data.first_name);
                    $('#last_name').val(data.last_name);
                    $('.modal-title').text('Edit User');
                    $('#user_id').val(user_id);
                    $('#action').val('Edit');
                    $('#data_action').val('Edit');
                }
            })
        });

        $(document).on('click', '.delete', function() {
            var user_id = $(this).attr('id');
            if (confirm("Are you sure you want to delete this?")) {
                $.ajax({
                    url: "http://localhost/codeigniter/api/delete",
                    method: "POST",
                    data: {
                        id: user_id
                    },
                    dataType: "JSON",
                    success: function(data) {
                        if (data.success) {
                            $('#success_message').html('<div class="alert alert-success">Data Deleted</div>');
                            fetch_data();
                        }
                    }
                })
            }
        });

    });
</script>

<html>

<head>
    <title>CURD REST API in Codeigniter</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>
    <div class="container">
        <br />
        <h3 align="center">Create CRUD REST API in Codeigniter - 4</h3>
        <br />
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-md-6">
                        <h3 class="panel-title">CRUD REST API in Codeigniter</h3>
                    </div>
                    <div class="col-md-6" align="right">
                        <button type="button" id="add_button" class="btn btn-info btn-xs">Add</button>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <span id="success_message"></span>
                <!-- <button id="refreshBtn">Refresh</button> -->
                <table class="table table-bordered table-striped" id="refreshTbl">
                    <thead>
                        <tr>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th colspan="2">Acion</th>
                            <!-- <th>Delete</th> -->
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

</html>

<div id="userModal" class="modal fade">
    <div class="modal-dialog">
        <form method="post" id="user_form">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Add User</h4>
                </div>
                <div class="modal-body">
                    <label>Enter First Name</label>
                    <input type="text" name="first_name" id="first_name" class="form-control" />
                    <span id="first_name_error" class="text-danger"></span>
                    <br />
                    <label>Enter Last Name</label>
                    <input type="text" name="last_name" id="last_name" class="form-control" />
                    <span id="last_name_error" class="text-danger"></span>
                    <br />
                </div>
                <div class="modal-footer">
                    <input type="hidden" name="id" id="user_id" />
                    <input type="hidden" name="data_action" id="data_action" value="Insert" />
                    <input type="submit" name="action" id="action" class="btn btn-success" value="Add" />
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </form>
    </div>
</div>

标签： phphtmljqueryajax