0
我有一個非常獨特的（也很深入的）問題。如果這兩個特徵中的任何一個都不吸引你，請不要閱讀。阿賈克斯寫入服務器問題
我有，我從頭開始編寫的程序。它正在創建一個HTML頁面，允許用戶將數據插入該頁面，然後提交該數據。
提交後，數據寫入到我的機器上本地運行的node.js服務器。它的唯一工作是將數據傳遞給它，並將其打印到啓動它的控制檯（本例中爲cmd提示符）
它通過查詢字符串寫入URL中，即http://localhost/?<parametersGoHere>
客戶端文件（HTML頁，javascript程序）也使用名爲http-server的node.js模塊進行託管。鏈接到模塊：https://github.com/nodeapps/http-server
（例如：進入所有我的文件存儲的目錄，並運行命令「HTTP服務器的」託管所有的我的文件上localhost:8080）
這是我的問題：當寫入node.js服務器時，ajax調用每次都會失敗。
我可以實際寫出來的，其中包括與值參數的URL，並且每次服務器會吐出正確的數據。
我看了這在谷歌瀏覽器的開發者工具，並且可以看到它有我列出的地址聯繫的問題。但問題是，它與我手動輸入並獲得結果的網址完全相同。
話雖這麼說，錯誤（在我看來）是某處network.js文件。任何人都可以幫我找到這個錯誤？
服務器（運行在其目錄節點server.js的命令提示符下）的HTML頁面上運行
var http = require('http');
var querystring = require('querystring');
var url = require('url');
var handler = function(request, response) {
var params = querystring.parse(url.parse(request.url).query);
var writeOut = function(status) {
response.writeHead(status, {'Content-Type': 'text/plain'});
response.end();
}
var name = params.name;
var workDesc = params.workDesc;
var wLoc = params.wLoc;
var DOC = params.DOC;
var severity = params.severity;
console.log("Name: " + name);
console.log("Work Description: " + workDesc)
console.log("Location: " + wLoc)
console.log("Date of Creation: " + DOC)
console.log("Severity: " + severity);
console.log("");
writeOut(200);
}
var server = http.createServer(handler);
server.listen(80);
腳本：
var load = function()
{
getDate();
getLocation();
}
var verifyWords = function (ev) {
var text = document.getElementById("workDesc").value;
if (text.split(" ").length > 299)
document.getElementById("workDesc").style.borderColor = "red";
//return true;
};
var getDate = function() {
var updateItem = document.getElementById("date");
var today = new Date();
var day = today.getDate();
var month = today.getMonth() + 1;
var year = today.getFullYear();
if (day < 10)
day = '0' + day;
if (month < 10)
month = '0' + month;
today = year + '-' + month + '-' + day;
updateItem.innerHTML = today;
};
var getLocation = function() {
var updateItem = document.getElementById("location");
var locationInfo = function (position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var alt = position.coords.altitude;
var info = "Latitude: " + lat + "<br />" + "Longitude: " + lon + "<br />" + " Altitude: " + alt;
var btn = document.getElementById("geoBtn");
updateItem.innerHTML = info;
updateItem.appendChild(btn);
}
var locationError = function (error) {
var errMsg = ['',
'Permission denied',
'Position unavailable',
'timeout'];
updateItem.value = ("Error receiving location info: " +
errMsg[error.code]);
updateItem.style.Color = "rgba(255,0,0,.4)";
}
var options = {
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 30000
};
var watchId = navigator.geolocation.getCurrentPosition(
locationInfo, locationError);
};
var submitted = function (form) {
var loc = document.getElementById("location");
var severity = document.getElementById("severity");
var desc = document.getElementById("workDesc");
var good = true;
if (document.getElementById("name").value.length < 3) {
document.getElementById("name").style.backgroundColor = "rgba(255,0,0,.3)";
good = false;
}
if (desc.value.split(" ").length > 299) {
desc.style.borderColor = "red";
good = false;
}
if (desc.value.length < 2) {
workDesc.style.backgroundColor = "rgba(255,0,0,.3)";
good = false;
}
if (!(loc.innerHTML.length > 0 && loc.innerHTML.indexOf("Error") === -1 && loc.innerHTML.indexOf("Lat") >= 0)) {
loc.style.backgroundColor = "rgba(255,0,0,.3)";
good = false;
} else if (severity.value === "default") {
severity.style.backgroundColor = "rgba(255,0,0,.3)";
good = false;
}
if (good) {
startSubmitData();
}
};
var startSubmitData = function() {
try {
if (submitData() === true)
return true;
}
catch (err)
{
saveLocal();
}
};
var clear = function()
{
var nam = document.getElementById("name");
nam.style.backgroundColor = "white";
var dat = document.getElementById("date");
dat.style.backgroundColor = "white";
var loc = document.getElementById("location");
loc.style.backgroundColor = "white";
var sev = document.getElementById("severity");
sev.style.backgroundColor = "white";
var desc = document.getElementById("workDesc");
desc.style.backgroundColor = "white";
dat.innerHTML = desc.value = "";
var btn = document.getElementById("geoBtn");
loc.innerHTML = "";
loc.appendChild(btn);
sev.selectedIndex = 0;
getDate();
}
var saveLocal = function() {
try {
var nam = document.getElementById("name");
var dat = document.getElementById("date");
var loc = document.getElementById("location");
var btn = document.getElementById("geoBtn");
loc.removeChild(btn);
var sev = document.getElementById("severity");
var desc = document.getElementById("workDesc");
alert("local");//Do localstorage
var i = 0;
while (localstorage["name" + i].length > 0)
i++;
localStorage["name" + i] = nam.value;
localStorage["date" + i] = dat.innerHTML;
localStorage["sev" + i] = sev.value;
localStorage["desc" + i] = desc.value;
localStorage["locaton" + i] = loc.innerHTML;
clear();
}
catch (err) {
alert("Localstorage is not defined. Is this running from file:///?");
}
};
HTML頁：
<!DOCTYPE html>
<html lang="en" manifest="cache.appcache">
<head>
<title>Create Work Order</title>
<meta name="viewport" content="width=1060">
<script src="project.js" type="text/javascript"></script>
<script src="network.js" type="text/javascript"></script>
<script src="jquery-2.0.3.js"></script>
<script>
function eval(evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
var regex = /[a-zA-Z]/;
if (!regex.test(key)) {
theEvent.returnValue = false;
if (theEvent.preventDefault) theEvent.preventDefault();
}
}</script>
<link rel="stylesheet" href="project.css" type="text/css" />
</head>
<header id="title">
<h2 class="title2">Create Work Order</h2>
</header>
<body onload="load()">
<div>
<section id="workForm">
<label>First name:</label>
<input type="text" id="name" style="width:20%" onkeypress="eval(event)" />
<Label>Last name:</label>
<input type="text" id="lastName" style="width: 20%" onkeypress="eval(event)"/>
<br />
<br />
<label>Work Description:</label>
<br />
<textarea id="workDesc" placeholder="Enter up to 300 words here." onkeyup="verifyWords(event)" maxlength="3000"></textarea>
<br />
<label>Work Location:</label>
<p id="location">
<input type="button" value="Refresh Location" id="geoBtn" onclick="getLocation()" style="float:right; margin-right:50%; height:3em;" />
</p>
<br />
<label>Date of creation:</label>
<p id="date"></p>
<br />
<label>Severity:</label>
<br />
<select id="severity" name="severity" style="margin-top:5px;">
<option value="default">Select One</option>
<option value="MINOR">Minor</option>
<option value="MAJOR">Major</option>
<option value="URGENT">Urgent</option>
</select>
<br />
<input id="submit" type="button" value="Submit" onclick="submitted(event)"/>
</section>
</div>
</body>
</html>
最後，我network.js代碼（調用時提交發生）：
var submitData = function() {
var loc = document.getElementById("location").innerHTML;
var ind = loc.indexOf("<input");
var loc = loc.substring(0, ind);
//var dataString = "name=" + document.getElementById("name").value + "&workDesc=" + workDesc.value + "&DOC=" + date.innerHTML + "&severity=" + severity.value + "&wLoc=" + loc;
var dataString = "name=Joe&workDesc=Test&DOC=8-5-2013&severity=MAJOR&wLoc=Latitude: 23234 Longitude:-239823 Altitude:Unavailable";
alert(dataString);
$.ajax({
type: "GET",
url: "http://localhost/",
data: dataString,
success: function() {
clear();
},
error: function()
{
saveLocal();
alert("Could not connect to server.");
}
});
submitLocal();
return true;
}
var submitLocal = function()
{
};
我意識到這是一個大量的代碼來通讀。請讓我知道，如果我能以任何方式更容易閱讀，或容易理解，留下評論。
看看Chrome的開發者工具的網絡選項卡。點擊失敗的請求。它與成功案例有何不同（點擊底部的灰色小圓圈以在不同頁面上堅持請求信息）？ – Blender
我不能說這是如何與這個數據的成功請求不同，因爲我還沒有。它不同於成功的請求（一般），因爲我的ajax /發送調用失敗。我對Chrome開發者工具不太瞭解，你能詳細闡述一下你的觀點嗎？ – Baelix
打開一個新選項卡，打開開發人員工具，然後轉到網絡。在那裏，單擊底部欄上的小黑圈以保存導航時的請求。開發人員工具打開後，將該網址放入您的地址欄並按Enter鍵。點擊表格中的結果行。看看它與失敗的AJAX請求有什麼不同，如果您從同一個標籤發送請求，它也會顯示在那裏。 – Blender