javascript - 从 AJAX 读回 POST 时获取未定义

标签 javascript php jquery json ajax

如果这是对已有文章的重新发布。我查看了许多已经发布的有关此问题的不同问题,但感觉没有任何与我的问题相匹配。如果有请链接一下。

我正在尝试学习 AJAX 并拥有一个接受两个输入的表单:serverName 和 isLive。以及将服务器添加到列表的按钮。我已经制作了一个 json 文件,其中有两个服务器,当我从中获取信息以更新列表时,它会列出服务器的 serverName 和 isLive 。当我转到 POST 信息时,列表更新时我得到的所有信息都是未定义的。

使用控制台日志,我知道信息正在从表单传递到要由 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');
            }
        });
    });
});

服务器.json

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

最佳答案

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

关于javascript - 从 AJAX 读回 POST 时获取未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41730996/

相关文章:

javascript - 如何制作如图所示的弹出屏幕?

javascript - 为移动设备的日期选择器添加 id

javascript - Fabricjs 加载FromDatalessJSON 时出现 JSON 错误

javascript - 添加 href 以从 firestore 自动生成数据表

javascript - 内爆阵列未按预期工作

java - 如何实现Java客户端应用程序(Android)和PHP服务器应用程序之间的通信?

php - 当某些输入参数使用值 'all' 作为通配符时,如何编写 PHP 代码(使用准备好的语句)从 MySQL DB 返回行?

javascript - 从文本文件加载 Json 对象 - 返回未捕获的语法错误 : Unexpected token "[ "

javascript - PhoneGap 中的 Cookie header : Refused to set unsafe header "Cookie"

jquery - 将 Jquery .css 与 CSS 转换合并