PHP和AJAX-提取数据时不会刷新另一页

时间:2018-12-21 00:53:00

标签: javascript php html mysql ajax

我当前的程序正在添加数据并将其插入数据库,但是我想要的是,我想要在其他页面或浏览器上自动不刷新。所以我有这两个浏览器,我如何不刷新就可以将数据提交到另一页。现在正在发送,但问题是我需要刷新页面

enter image description here

这是我的 Ajax4.html

的代码
 <form id="postForm">
        <input type="text" name="name" id="name2">
        <input type="submit" value="Submit">
    </form>

    <script>

        document.getElementById('postForm').addEventListener('submit', postName);


        function postName(e){
            e.preventDefault();

            var name = document.getElementById('name2').value;
            var params = "name="+name
;
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'process.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            xhr.onload = function(){
                console.log(this.responseText);
            }
            xhr.send(params);
        }       
    </script>

我的 Process.php

这是我连接数据库的地方

    <form id="postForm">
        <input type="text" name="name" id="name2">
        <input type="submit" value="Submit">
    </form>

    <script>

        document.getElementById('postForm').addEventListener('submit', postName);


        function postName(e){
            e.preventDefault();

            var name = document.getElementById('name2').value;
            var params = "name="+name
;
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'process.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

            xhr.onload = function(){
                console.log(this.responseText);
            }
            xhr.send(params);
        }       
    </script>

我的发送页面 Ajax5.html

在这里获取数据,在这里我想发送数据而不刷新页面

<button id="button">Get User</button>
        <br><br>

        <h1>Users</h1>
        <div id="users"></div>

<script>

document.getElementById('button').addEventListener('click', loadUsers);

    function loadUsers(){
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'users.php', true);

        xhr.onload = function(){
            if(this.status == 200){
                var users = JSON.parse(this.responseText);

                var output = '';

                for(var i in users){
                output += '<ul>' +
                    '<li>ID: ' +users[i].id+'</li>' +
                    '<li>Name: ' +users[i].name +'</li>' +
                    '</ul>';
                }

                document.getElementById('users').innerHTML = output;
            }
        }

        xhr.send();
    }

</script>

1 个答案:

答案 0 :(得分:2)

您可以添加setInterval来定期更新用户列表:

func flattenDeep(args []interface{}, v reflect.Value) []interface{} {

    if v.Kind() == reflect.Interface {
        v = v.Elem()
    }

    if v.Kind() == reflect.Array || v.Kind() == reflect.Slice {
        for i := 0; i < v.Len(); i++ {
            args = flattenDeep(args, v.Index(i))
        }
    } else {
        args = append(args, v.Interface())
    }

    return args
}

func AcceptsAnything(v ...interface{}) {
    args := flattenDeep(nil, reflect.ValueOf(v))
    fmt.Println(args)
}