0
これは既に存在するものの再投稿である場合。私はこれについて既に投稿された別の問題の束を見たが、私の問題にマッチしたとは思わなかった。 1つあればそれをリンクしてください。AJAXからPOSTを読み返すときに未定義になる
私はAJAXを学び、serverNameとisLiveという2つの入力を受け取るフォームを用意しようとしています。リストにサーバーを追加するボタンと同様に。私はすでに2つのサーバーを持つjsonファイルを作成しました。リストを更新するための情報を取得すると、サーバーのserverNameとisLiveが表示されます。 POST情報に行くと、リストが更新されたときに戻ってくるものはすべて定義されていません。
コンソールログを使用すると、フォームからオブジェクトにAJAXによって送信される情報が渡されていることがわかりました。これは成功関数をトリガーしているようですが、見たときにJsonに何も追加されていません。フィールドは未定義です。あなたはJavaScriptを使用して、サーバー内のファイルを変更することはできません
の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"}]