Question

我使用jQuery Get和Post方法创建了一个简单的应用程序，从json文件中检索数据（用户）并添加到其中。

index.html有一个表来通过ajax和get请求显示用户，并且工作正常。但是有一个按钮可以使用带有post方法的ajax将新用户添加到json文件中，该方法从输入中获取新的用户详细信息，但是这个用户根本不发送数据并在表的末尾定义显示。我控制台。记录我发布的数据，它看起来很好，但没有发送。注意：我首先使用浏览器同步，现在我使用localhost但结果相同。

我的index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <!----------------------------------------------------------- Meta tags ----------------------------------------------------->
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Logs</title>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>

<body>
    <div class="row">
        <div class="col-md-6">
            <table class="table table-striped">
                <thead>
                <tr> <th>ID</th> <th>First name</th> <th>Last name</th> </tr>
                </thead>
                <tbody class="user">
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <button class="btn btn-success getUsers"> Get Users </button>
            <form class= "form-inline">
                <input id="id"          class="form-group" placeholder="ID">
                <input id="firstName"   class="form-group" placeholder="First name">
                <input id="lastName"    class="form-group" placeholder="Last name">
            </form>
            <button class="btn btn-success addUsers"> Add a user</button>
        </div>
    </div>
    <script>
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        $('.getUsers').click(function(){
            $.ajax({
                type:"GET",
                url: '/logs/users.json',
                dataType: 'json',
                success: function(users){
                    $.each(users, function(i, user){
                        $('.user').append('<tr><td>'+ user.id +'</td> <td>'+ user.firstName +'</td> <td>' +user.lastName + '</td></tr>');
                    });
                },
                error: function(){
                    alert('error');
                }
            });
        });
        //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

        $('.addUsers').click(function(){
            var newUser = {
                id: $('#id').val(),
                firstName: $('#firstName').val(),
                lastName: $('#lastName').val()
            };
            console.log(newUser);
            $.ajax({
                type:"POST",
                url: '/logs/users.json',
                dataType: 'json',
                data: newUser,
                success: function(person){
                        $('.user').append('<tr><td>'+ person.id +'</td> <td>'+ person.firstName +'</td> <td>' +person.lastName + '</td></tr>');
                },
                error: function(){
                    alert('error');
                }
            });
        });
        ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    </script>
</body>
</html>

和json文件：

[
                {
                    "id": 1,
                    "firstName": "A",
                    "lastName": "B"
                }
            ]

Answer 1

您似乎试图发布到只能定义数据结构但不能定义功能的JSON文件。您需要发布某种类型的中间脚本（如PHP或.NET）以将数据附加到JSON文件中。

jQuery post方法不发送数据

1 个答案: