0

私は非常にユニークな (そして非常に深い) 問題を抱えています。これらの 2 つの特徴のいずれかに魅力を感じない場合は、読み進める必要を感じないでください。

私はゼロから書いたプログラムを持っています。HTML ページを作成し、ユーザーがそのページにデータを挿入して、そのデータを送信できるようにします。
送信すると、マシンでローカルに実行している node.js サーバーにデータが書き込まれます。その唯一の仕事は、渡されたデータを受け取り、それを開始したコンソール (この場合は cmd プロンプト)に出力することです
。つまり、URL にクエリ文字列を介して書き込みますhttp://localhost/?<parametersGoHere>
。また、http-server と呼ばれる node.js モジュールを使用してホストされています。モジュールへのリンク: https://github.com/nodeapps/http-server
(例: すべてのファイルが保存されているディレクトリに移動し、コマンド「http-server」を実行すると、すべてのファイルが にホストされますlocalhost:8080)

これは私の問題です: node.js サーバーに書き込むとき、毎回 ajax 呼び出しが失敗します。
値付きのパラメーターを含む URL を物理的に書き出すことができ、サーバーは毎回正しいデータを吐き出します。

Google Chrome の開発者ツールでこれを調べたところ、リストしたアドレスへの接続に問題があることがわかりました。しかし問題は、手動で入力して結果を取得できる URL とまったく同じ URL であることです。
そうは言っても、(私の意見では) エラーは network.js ファイルのどこかにあります。このエラーを見つけるのを手伝ってくれる人はいますか?



サーバー: (コマンド プロンプトのディレクトリに node server.js を指定して実行)

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);


HTML ページで実行されるスクリプト:

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()
{
}; 



これは読むべきコードがたくさんあることに気づきました。コメントを残して、これを何らかの方法で読みやすくしたり、理解しやすくしたりできるかどうかを教えてください。

4

1 に答える 1