douma5954
douma5954
2017-01-18 23:01

从AJAX读取POST时获取未定义

  • json
  • php
  • ajax
  • javascript
  • jquery

If this is a re-post of an already existing. I looked a bunch of different issue already posted about this but didn't feel any matched my issue. If there is one please link it.

I'm trying to learn AJAX and have a form that takes two inputs a serverName, and a isLive. As well as a button to add a server to the list. I already made a json file that has two servers in it and when I GET info from it to update the list it lists the server's serverName and isLive fine. When I go to POST information all I get back when the list is updated is undefined.

Using console logs I know that the information is being passed from the form to Object to be sent by AJAX and that it seems to trigger the success function, but when I look there is nothing added to the Json and it says the fields are undefined.

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"}]
  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

1条回答