我在一个项目上工作，我需要连接一个mysql数据库到我写的代码。数据库本身的结构将非常简单。然而，在我尝试设置计划中的数据库之前，我已经决定创建一个数据库，我将临时使用它来查看是否可以正确地向它发送post请求。根据我的努力，我显然不能这样做。我通过firefox检查器得到以下错误： NetworkError: A network error occurred. shipviewer.js:38 sendAJAX file:///C:/Users/laymmi/Documents/Ship%20Viewer/shipviewer.js:38:5 updateDatabase file:///C:/Users/laymmi/Documents/Ship%20Viewer/shipviewer.js:12:2 onclick file:///C:/Users/laymmi/Documents/Ship%20Viewer/shipviewer.html:1:1 我真的不理解火狐的网络错误；这使得诊断错误变得困难。但是，我可以合理地看出，我的问题来自于试图通过shipviewer.js中的post请求将数据发送到我笔记本电脑上的testmysql数据库。现在，这是否是因为我以错误的格式发送数据，使用了错误的url（在本例中，它只是指向 localhost:3306 而不是一个服务器位于互联网上），或两者的结合，我不知道。我的服务器在3306端口上运行。
有人知道问题是什么吗？我确信这是一个初学者的错误，因为我刚刚开始湿脚。
shipviewer.html：
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Ship Viewer v0.0.6</title>
<link rel="stylesheet" type="text/css" href="shipviewer.css">
</head>
<body>
<h1>Ship Viewer</h1>
<!-- All software and build information regarding the ships will displayed here-->
<div id="main">
<div id="ship0" class="shipContainer" >
<div class="shipName"><h3>Name of Ship!</h3></div>
<div class="shipHeader" >
<span class="version">Version</span>
<span class="build">Build</span>
</div>
<div class="holder flex">
<!-- The name of the pieces of software will be on the left half of a shipContainer -->
<div class="leftColumn flex">
<div class="alignRight">
<p class="columnFormatting">INFO_1</p>
<p class="columnFormatting">INFO_2</p>
<p class="columnFormatting">INFO_3</p>
<p class="columnFormatting">INFO_4</p>
<p class="columnFormatting">INFO_5</p>
<p class="columnFormatting">INFO_6</p>
<p class="columnFormatting">INFO_7</p>
<p class="columnFormatting">INFO_8</p>
<p class="columnFormatting">INFO_9</p>
<p class="columnFormatting">INFO_10</p>
</div>
</div>
<!-- The version and build numbers for each piece of software will be on the right half of a shipContainer -->
<div class="rightColumn flex">
<div class="versionName">
<div class="addMarginLeft">
<div id="versionName0Ship0">50.87.1</div> <input type="text" id="versionName0Ship0Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName1Ship0">50.87.1</div> <input type="text" id="versionName1Ship0Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName2Ship0">50.87.1</div> <input type="text" id="versionName2Ship0Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName3Ship0">50.87.1</div> <input type="text" id="versionName3Ship0Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName4Ship0">50.87.1</div> <input type="text" id="versionName4Ship0Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName5Ship0">50.87.1</div> <input type="text" id="versionName5Ship0Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName6Ship0">50.87.1</div> <input type="text" id="versionName6Ship0Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName7Ship0">50.87.1</div> <input type="text" id="versionName7Ship0Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName8Ship0">50.87.1</div> <input type="text" id="versionName8Ship0Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName9Ship0">50.87.1</div> <input type="text" id="versionName9Ship0Textbox" class="invisible" maxlength="10" size="10" value="test...">
</div>
</div>
<div class="buildName">
<div class="addMarginLeft">
<div id="buildName0Ship0">1204</div> <input type="text" id="buildName0Ship0Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName1Ship0">1204</div> <input type="text" id="buildName1Ship0Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName2Ship0">1204</div> <input type="text" id="buildName2Ship0Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName3Ship0">1204</div> <input type="text" id="buildName3Ship0Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName4Ship0">1204</div> <input type="text" id="buildName4Ship0Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName5Ship0">1204</div> <input type="text" id="buildName5Ship0Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName6Ship0">1204</div> <input type="text" id="buildName6Ship0Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName7Ship0">1204</div> <input type="text" id="buildName7Ship0Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName8Ship0">1204</div> <input type="text" id="buildName8Ship0Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName9Ship0">1204</div> <input type="text" id="buildName9Ship0Textbox" class="invisible" maxlength="4" size="4" value="test">
</div>
</div>
</div>
<span id="returnedTestInfo" >Information...?</span>
</div>
<button class="mainButton" id="editButton0" onclick="toggleShipViewerInformation('editButton0', 'updateButton0', 'cancelButton0', 0)">Edit</button>
<button class="mainButton invisible" id="updateButton0" onclick="updateDatabase('Can you see this?')">Update</button>
<button class="mainButton invisible" id="cancelButton0" onclick="toggleShipViewerInformation('editButton0', 'updateButton0', 'cancelButton0', 0)">Cancel</button>
</div>
<div id="ship1" class="shipContainer" >
<div class="shipName"><h3>Name of Ship!</h3></div>
<div class="shipHeader" >
<span class="version">Version</span>
<span class="build">Build</span>
</div>
<div class="holder flex">
<!-- The name of the pieces of software will be on the left half of a shipContainer -->
<div class="leftColumn flex">
<div class="alignRight">
<p class="columnFormatting">INFO_1</p>
<p class="columnFormatting">INFO_2</p>
<p class="columnFormatting">INFO_3</p>
<p class="columnFormatting">INFO_4</p>
<p class="columnFormatting">INFO_5</p>
<p class="columnFormatting">INFO_6</p>
<p class="columnFormatting">INFO_7</p>
<p class="columnFormatting">INFO_8</p>
<p class="columnFormatting">INFO_9</p>
<p class="columnFormatting">INFO_10</p>
</div>
</div>
<!-- The version and build numbers for each piece of software will be on the right half of a shipContainer -->
<div class="rightColumn flex">
<div class="versionName">
<div class="addMarginLeft">
<div id="versionName0Ship1">50.87.1</div> <input type="text" id="versionName0Ship1Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName1Ship1">50.87.1</div> <input type="text" id="versionName1Ship1Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName2Ship1">50.87.1</div> <input type="text" id="versionName2Ship1Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName3Ship1">50.87.1</div> <input type="text" id="versionName3Ship1Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName4Ship1">50.87.1</div> <input type="text" id="versionName4Ship1Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName5Ship1">50.87.1</div> <input type="text" id="versionName5Ship1Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName6Ship1">50.87.1</div> <input type="text" id="versionName6Ship1Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName7Ship1">50.87.1</div> <input type="text" id="versionName7Ship1Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName8Ship1">50.87.1</div> <input type="text" id="versionName8Ship1Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName9Ship1">50.87.1</div> <input type="text" id="versionName9Ship1Textbox" class="invisible" maxlength="10" size="10" value="test...">
</div>
</div>
<div class="buildName">
<div class="addMarginLeft">
<div id="buildName0Ship1">1204</div> <input type="text" id="buildName0Ship1Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName1Ship1">1204</div> <input type="text" id="buildName1Ship1Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName2Ship1">1204</div> <input type="text" id="buildName2Ship1Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName3Ship1">1204</div> <input type="text" id="buildName3Ship1Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName4Ship1">1204</div> <input type="text" id="buildName4Ship1Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName5Ship1">1204</div> <input type="text" id="buildName5Ship1Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName6Ship1">1204</div> <input type="text" id="buildName6Ship1Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName7Ship1">1204</div> <input type="text" id="buildName7Ship1Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName8Ship1">1204</div> <input type="text" id="buildName8Ship1Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName9Ship1">1204</div> <input type="text" id="buildName9Ship1Textbox" class="invisible" maxlength="4" size="4" value="test">
</div>
</div>
</div>
</div>
<button class="mainButton" id="editButton1" onclick="toggleShipViewerInformation('editButton1', 'updateButton1', 'cancelButton1', 1)">Edit</button>
<button class="mainButton invisible" id="updateButton1">Update</button>
<button class="mainButton invisible" id="cancelButton1" onclick="toggleShipViewerInformation('editButton1', 'updateButton1', 'cancelButton1', 1)">Cancel</button>
</div>
<div id="ship2" class="shipContainer" >
<div class="shipName"><h3>Name of Ship!</h3></div>
<div class="shipHeader" >
<span class="version">Version</span>
<span class="build">Build</span>
</div>
<div class="holder flex">
<!-- The name of the pieces of software will be on the left half of a shipContainer -->
<div class="leftColumn flex">
<div class="alignRight">
<p class="columnFormatting">INFO_1</p>
<p class="columnFormatting">INFO_2</p>
<p class="columnFormatting">INFO_3</p>
<p class="columnFormatting">INFO_4</p>
<p class="columnFormatting">INFO_5</p>
<p class="columnFormatting">INFO_6</p>
<p class="columnFormatting">INFO_7</p>
<p class="columnFormatting">INFO_8</p>
<p class="columnFormatting">INFO_9</p>
<p class="columnFormatting">INFO_10</p>
</div>
</div>
<!-- The version and build numbers for each piece of software will be on the right half of a shipContainer -->
<div class="rightColumn flex">
<div class="versionName">
<div class="addMarginLeft">
<div id="versionName0Ship2">50.87.1</div> <input type="text" id="versionName0Ship2Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName1Ship2">50.87.1</div> <input type="text" id="versionName1Ship2Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName2Ship2">50.87.1</div> <input type="text" id="versionName2Ship2Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName3Ship2">50.87.1</div> <input type="text" id="versionName3Ship2Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName4Ship2">50.87.1</div> <input type="text" id="versionName4Ship2Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName5Ship2">50.87.1</div> <input type="text" id="versionName5Ship2Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName6Ship2">50.87.1</div> <input type="text" id="versionName6Ship2Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName7Ship2">50.87.1</div> <input type="text" id="versionName7Ship2Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName8Ship2">50.87.1</div> <input type="text" id="versionName8Ship2Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName9Ship2">50.87.1</div> <input type="text" id="versionName9Ship2Textbox" class="invisible" maxlength="10" size="10" value="test...">
</div>
</div>
<div class="buildName">
<div class="addMarginLeft">
<div id="buildName0Ship2">1204</div> <input type="text" id="buildName0Ship2Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName1Ship2">1204</div> <input type="text" id="buildName1Ship2Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName2Ship2">1204</div> <input type="text" id="buildName2Ship2Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName3Ship2">1204</div> <input type="text" id="buildName3Ship2Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName4Ship2">1204</div> <input type="text" id="buildName4Ship2Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName5Ship2">1204</div> <input type="text" id="buildName5Ship2Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName6Ship2">1204</div> <input type="text" id="buildName6Ship2Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName7Ship2">1204</div> <input type="text" id="buildName7Ship2Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName8Ship2">1204</div> <input type="text" id="buildName8Ship2Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName9Ship2">1204</div> <input type="text" id="buildName9Ship2Textbox" class="invisible" maxlength="4" size="4" value="test">
</div>
</div>
</div>
</div>
<button class="mainButton" id="editButton2" onclick="toggleShipViewerInformation('editButton2', 'updateButton2', 'cancelButton2', 2)">Edit</button>
<button class="mainButton invisible" id="updateButton2">Update</button>
<button class="mainButton invisible" id="cancelButton2" onclick="toggleShipViewerInformation('editButton2', 'updateButton2', 'cancelButton2', 2)">Cancel</button>
</div>
</div>
<script src="shipviewer.js"></script>
</body>
<footer>
</footer>
</html>shipviewer.js文件：
/*********************************************************************************************************************
This function will POST user given information to the database; thereby updating it.
Parameters:
url - the server (file) location
data - the information being sent/requested
*********************************************************************************************************************/
function updateDatabase(data){
var url = "localhost:3306"; //the URL for sending info?
sendAJAX("POST", url, data);
}
/*********************************************************************************************************************
This function sends AJAX requests
Parameters:
requestType - a string that is a SQL request type (GET, POST, etc.)
url - the server (file) location
data - the information being sent/requested
*********************************************************************************************************************/
function sendAJAX(requestType, url, data) {
var req = new XMLHttpRequest(); //XMLHttpRequest object is required for AJAX requests
// req.addEventListener('error', function(err) {
// alert(err.message);
//}, false);
req.open(requestType, url, true); //Initializes the asynchronous request
req.onreadystatechange = function() { //Defines a function to be called when the readyState property changes
if(this.readyState === 4 && this.status === 200) { //XMLHttpRequest code 4 == request finished and response is ready; HTTP status code 200 == OK
document.getElementById("returnedTestInfo").innerHTML = this.responseText; //Returns the response data (from the server) as a string
}//else if(this.readyState === 4) { //request finished and response is ready, but some error has occurred
//alert(this.responseText);
//}
};
req.send(data); //Sends the request
}
/*
function sendAJAX(requestType, url, data, contentType,onSuccess) {
var req = new XMLHttpRequest(); //XMLHttpRequest object is required for AJAX requests
req.addEventListener('error', function(err) {
alert(err.message);
}, false);
req.open(requestType, url); //Initializes the request
req.onreadystatechange = function() { //Defines a function to be called when the readyState property changes
if(this.readyState === 4 && this.status === 200) { //XMLHttpRequest code 4 == request finished and response is ready; HTTP status code 200 == OK
onSuccess(this.responseText); //Returns the response data (from the server) as a string
} else if(this.readyState === 4) {
alert(this.responseText);
}
};
if(contentType) {
req.setRequestHeader("Content-type", contentType);
}
req.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
req.send(data); //Sends the request
}
* /
//req.open("POST", the_server_(file)_location, true);
//req.send();
/*********************************************************************************************************************
This function toggles between displaying information and allowing the user to edit the information via the Edit or
Cancel buttons.
Parameters:
elementIdEdit - element ID of the Edit button
elementIdUpdate - element ID of the Update button
elementIdCancel - element ID of the Cancel button
shipNum - an int that corresponds to a particular ship. Ex: "ship0" == 0
*********************************************************************************************************************/
function toggleShipViewerInformation(elementIdEdit, elementIdUpdate, elementIdCancel, shipNum){
var versionName = ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0"];
var buildName = ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0"];
var versionNameTextbox = ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0"];
var buildNameTextbox = ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0"];
//Assigning the vars in the array with element DOM information.
for(var count = 0; count < versionName.length; count++){
versionName[count] = document.getElementById("versionName"+count+"Ship"+shipNum);
buildName[count] = document.getElementById("buildName"+count+"Ship"+shipNum);
versionNameTextbox[count] = document.getElementById("versionName"+count+"Ship"+shipNum+"Textbox");
buildNameTextbox[count] = document.getElementById("buildName"+count+"Ship"+shipNum+"Textbox");
}
//Toggling the version and build information from read-only text to editable textboxes
for(var count = 0; count < versionName.length; count++){
toggleClass(versionName[count], "invisible");
toggleClass(buildName[count], "invisible");
toggleClass(versionNameTextbox[count], "invisible");
toggleClass(buildNameTextbox[count], "invisible");
}
toggleButtons(elementIdEdit, elementIdUpdate, elementIdCancel);
}
/*********************************************************************************************************************
This function calls toggleClass() to show/hide the appropriate set of buttons when the user clicks on Edit or Cancel
*********************************************************************************************************************/
function toggleButtons(elementIdEdit, elementIdUpdate, elementIdCancel) {
var edit = document.getElementById(elementIdEdit);
var update = document.getElementById(elementIdUpdate);
var cancel = document.getElementById(elementIdCancel);
//Hiding/Showing the Edit button
toggleClass(edit, "invisible");
//Showing/Hiding the Update and Cancel buttons
toggleClass(update, "invisible");
toggleClass(cancel, "invisible");
}
/*********************************************************************************************************************
This function toggles whatever class is passed as a parameter. Example: the invisible class which is placed or removed
on the buttons.
*********************************************************************************************************************/
function toggleClass(element, className) {
if(element.classList.contains(className)) {
element.classList.remove(className);
} else {
element.classList.add(className);
}
}shipviewer.css文件：
/*
header{
background-color: #F9F0D7;
color: #A3916A;
font-family: "Source Sans Pro", "Lucida Grande", sans-serif;
}
* /
body {
background-color: white;
font-family: "Lato", sans-serif;
text-align: center;
color: black;
/*font-weight: 400;*/
/*background: linear-gradient(#27A7DE, #19173C) fixed;*/
background-repeat: no-repeat;
}
footer {
background-color: #272562; /* imperial purple */
font-family: "Lato", sans-serif;
text-align: center;
width: 100%;
height: 50px;
color: white;
/*display: flex;*/
justify-content: center;
align-items: center;
}
# main {
display: flex;
justify-content: center;
}
.shipContainer {
background-color: #272562; /* imperial purple */
color: white;
width: 33%;
height: 600px;
width: 400px;
margin: 5px;
}
.shareContainer {
width: 33%;
/*align-content: flex-start;*/
margin: 0px;
}
.softwareName {
text-align: right;
}
.flex {
display: flex;
}
.marginForDisplay {
margin: 10px;
}
.alignRight {
text-align: right;
}
.addMarginLeft {
margin-left: 40px;
}
.invisible {
display: none;
}
.shipHeader {
text-align: center;
}
.version {
margin-right: 40px;
margin-left: 40px;
}
.build {
//margin-right: 80px;
}
.leftColumn {
/*max-width: 150px;*/
margin-left: 10px;
margin-right: 10px;
}
.columnFormatting {
margin: 0px;
min-width: 95px;
}
# listOfInfo {
display: inline-block;
width: 33%;
width: 100px;
min-height: 100px;
}
暂无答案！
目前还没有任何答案，快来回答吧！