Javascript GET net:：ERR_CONNECTION_在使用ajax和服务器将图像加载到SPA时被拒绝
正在尝试创建单页应用程序。我的代码的前半部分工作正常（重新加载显示图像） 但是在提交表单时，我得到net:：ERR\u CONNECTION\u拒绝错误。 我不明白我做错了什么？目前我有嵌套的ajax调用，因为否则图像会在提交到json文件之前尝试上载 我的AJAX客户端代码：：Javascript GET net:：ERR_CONNECTION_在使用ajax和服务器将图像加载到SPA时被拒绝,javascript,node.js,ajax,server,single-page-application,Javascript,Node.js,Ajax,Server,Single Page Application,正在尝试创建单页应用程序。我的代码的前半部分工作正常（重新加载显示图像） 但是在提交表单时，我得到net:：ERR\u CONNECTION\u拒绝错误。 我不明白我做错了什么？目前我有嵌套的ajax调用，因为否则图像会在提交到json文件之前尝试上载 我的AJAX客户端代码：： $("document").ready(function(event){ //event.preventDefault() $.ajax({ url: "images.json", type:
$("document").ready(function(event){
//event.preventDefault()
$.ajax({
url: "images.json",
type: "GET",
datatype: "JSON",
error: function(){
$("#status").html("<p> An error occured </p>");
},
success:
function(data){
var $image = $('#new-image')
$.getJSON("images.json", function(data){
$image.html("");
for (var i = data.length; i--;)
{
console.log(data[i]["name"])
$image.append('<img src="' + data[i]["name"] + '">');
}
})
}
})
})
$('form').on("submit", function(event){
event.preventDefault()
var formData = new FormData()
formData.append('name', document.getElementById('name').value)
formData.append('avatar', document.getElementById('avatar').files[0])
$.ajax({
type: "POST",
url: "upload",
enctype: 'multipart/form-data',
data: formData,
processData: false,
contentType: false,
cache: false,
error:
function(){
$("#status").html("<p> An error occured </p>");
},
success:
function(formData){
console.log("success")
$.ajax({
url: "images.json",
type: "GET",
datatype: "JSON",
timeout: 4000,
error:
function(){
$("#status").html("<p> An error occured </p>");
},
success:
function(data){
var $image = $('#new-image')
$image.html("");
for (var i = data.length; i--;)
{
console.log(data["name"])
$image.append('<img src="' + data[i]["name"] + '">');
}
}
})
}
})
})
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/sign-in/">
<link href="index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#"> FIRST SPA PAGE </a>
<div class="search">
<div class="collapse navbar-collapse" id="navbarCollapse">
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" id="search-box" placeholder="Search" >
<button id="search-button" class="btn btn-outline-primary" type="submit" >Search</button>
</form>
</div>
</div>
</nav>
</header>
<div id="wrapper">
<img src="mountains.jpg" id="coverphoto" alt="cover photo">
<div class="centered">WELCOME.</div>
</div>
<div class="container">
<h1>File Upload</h1>
<form id="form" enctype="multipart/form-data" method="post">
Name: <input type="text" name="name" id="name"/> <br/>
Image: <input type="file" name="image" id="avatar"/><br/>
<input type="submit" value="Submit" />
</form>
<div id="status">
</div>
</div>
<div id=new-image>
</div>
<script src="webpage.js"></script>
</body>
</html>
搜寻
欢迎
文件上传
名称：
图像：
客户端内部的webpage.js、index.js和images.js。我复制了你的代码（我没有全部代码，所以与你一起工作过），它100%工作。这里可能少了些什么。你能调试这个问题并提供更多的细节吗？如果我幸运的话，第一次和第二次图像上传都能正常工作，然后后续的上传会显示一个空白框和一个错误。如果我重新加载页面，所有的图像都显示良好，这只是上传。我有它显示的屏幕截图示例。它们都是GET错误。此外，一旦图像保存（在文件夹和json文件中），如果该图像再次上传，则工作正常。如果图像尚未保存，并且是第一次上载，则会发生错误。您没有说在获取实际图像时发生错误…我以为您在AJAX中遇到了错误。。。请提供获取图像的html。我看到您的图像也出现了这个错误。json…我真的不知道为什么会发生这种情况。这可能与Linux或网络有关。我用html和文件结构编辑了上面的内容。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/sign-in/">
<link href="index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#"> FIRST SPA PAGE </a>
<div class="search">
<div class="collapse navbar-collapse" id="navbarCollapse">
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" id="search-box" placeholder="Search" >
<button id="search-button" class="btn btn-outline-primary" type="submit" >Search</button>
</form>
</div>
</div>
</nav>
</header>
<div id="wrapper">
<img src="mountains.jpg" id="coverphoto" alt="cover photo">
<div class="centered">WELCOME.</div>
</div>
<div class="container">
<h1>File Upload</h1>
<form id="form" enctype="multipart/form-data" method="post">
Name: <input type="text" name="name" id="name"/> <br/>
Image: <input type="file" name="image" id="avatar"/><br/>
<input type="submit" value="Submit" />
</form>
<div id="status">
</div>
</div>
<div id=new-image>
</div>
<script src="webpage.js"></script>
</body>
</html>