Question

如果这是已经存在的重新发布。我看了一堆关于此问题的不同问题，但感觉不到我的问题。如果有，请链接。

我正在尝试学习AJAX，并且有一个表单需要两个输入，一个是serverName，一个是isLive。以及将服务器添加到列表的按钮。我已经创建了一个包含两个服务器的json文件，当我从中获取信息以更新列表时，它列出了服务器的serverName和isLive。当我转到POST信息时，我更新的列表更新是未定义的。

使用控制台日志我知道信息正在从表单传递给Object，以便由AJAX发送并且它似乎触发了成功函数，但是当我看起来没有任何东西添加到Json并且它表示字段未定义。

的index.php

<!DOCTYPE html>
<html>
    <head>
        <title>Ajax</title>
    </head>
    <body>
        <h1>Server List</h1>
        <ul id="servers">
        </ul>
        <h4>Add a Server</h4>
        <p>Server Name: <input type="text" id="serverName"></p>
        <p>Offline or Online: <input type="text" id="isLive"></p>
        <button id="add-server">Add!</button>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="main.js"></script>
    </body>
</html>

main.js

$(function() {
    var $servers = $('#servers');
    var $serverName = $('#serverName');
    var $isLive = $('#isLive');
    $.ajax({
        type : 'GET',
        url: 'servers.json',
        success: function(servers) {
            $.each(servers, function(i, server) {
                $servers.append('<li>Server: '+ server.serverName +', Status: '+server.isLive+'<li>');
            });
        },
        error: function() {
            alert('Error loading server status!');
        }
    });

    $('#add-server').on('click', function() {
        var server = {
            serverName: $serverName.val(),
            isLive: $isLive.val(),
        };
        console.log(server);
        $.ajax({
            type: 'POST',
            url: 'servers.json',
            data: server,
            success: function(newServer) {
                $servers.append('<li>Server: '+ newServer.serverName +', Status: '+newServer.isLive+'<li>');
            },
            error: function(){
                alert('error saving server');
            }
        });
    });
});

servers.json

[{"serverName":"vanilla","isLive":"offline"}, {"serverName":"SkyFactory","isLive":"Online"}]

Answer 1

您无法使用JavaScript修改服务器中的文件。检查这可能有所帮助： Use JQuery to Modify external JS File

从AJAX读取POST时获取未定义

1 个答案: