[英]Loading JSON File in html
大家好,我在加载json文件时遇到了问题。 当我单击应该加载它的按钮时,好像什么也没有发生。 HTML的新功能,因此不胜感激。 这只是功能而不是整个文件!
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{fragments/layout :: layout (~{::body},'hello')}">
<body style="background-color:green;">
<div class="container">
<h1 style="font-family:verdana;"><center>ANAME</center></h1>
<input type='text' value='Input directory' id = 'input' style='width:200px;margin:0 50%;position:relative;left:-100px;'><br></br>
<input type='submit' value='Get Data!' id='demo' onClick='myFunction()' style='height:50px;width:100px;margin:0 50%;position:relative;left:-50px;'>
<script>
function myFunction() {
//---my custom validation---
var inputField = document.getElementById("input");
if (inputField.value == "" || inputField.value == "Input directory") {
return;
}
//---Loading JSON---
$.ajax({
url: "test.json",
dataType: "json",
data: {},
success: function(data){
//---Do whatever with the loaded 'data' variable;
alert('go');
},
error:function(error){
alert('Invalid');
}
});
}
</script>
</div>
</body>
</html>
function myFunction() { var inputField = document.getElementById("input"); var fr = null; if (input.files && input.files[0]) { fr = new FileReader(); fr.onload = function() { alert(fr.result); }; fr.readAsText(inputField.files[0]); }else alert("plz select a file"); }
<input type="file" id="input"/> <input type="button" onclick="myFunction()" value="test" />
你可以用这个
$.ajax({
dataType: "json",
url: url,
data: data,
success: function(data){},
error:function(error){}
});
getJSON是大多数实现都将指定成功处理程序
$.getJSON( "test.json", function( data ) {
alert("success");
});
详细信息http://api.jquery.com/jquery.getjson/#jQuery-getJSON-url-data-success
编辑
用于从输入元素加载json文件,您可以使用此
function myFunction() {
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
alert('The File APIs are not fully supported in this browser.');
return;
}
var inputField = document.getElementById("input");
var fr = null;
if (input.files && input.files[0]) {
fr = new FileReader();
fr.onload = function() {
alert(fr.result);
};
fr.readAsText(inputField.files[0]);
}
}
您可以尝试以下操作:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:replace="~{fragments/layout :: layout (~{::body},'hello')}">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body style="background-color:green;">
<div class="container">
<h1 style="font-family:verdana;"><center>ANAME</center></h1>
<input type='text' value='Input directory' id = 'input' style='width:200px;margin:0 50%;position:relative;left:-100px;'><br></br>
<input type='submit' value='Get Data!' id='demo' onClick='return myFunction();' style='height:50px;width:100px;margin:0 50%;position:relative;left:-50px;'>
<script>
function myFunction() {
//---my custom validation---
var inputField = document.getElementById("input");
if (inputField.value == "" || inputField.value == "Input directory") {
return false;
}
//---Loading JSON---
$.ajax({
url: "test.json",
dataType: "json",
data: {},
success: function(data){
//---Do whatever with the loaded 'data' variable;
alert('go');
},
error:function(error){
alert('Invalid');
}
});
return false;
}
</script>
</div>
</body>
</html>
您发布的标记没有指向jQuery库的链接,您可以将此代码插入标签上方以包含它,jQuery使用'$'字符使响应更快,更简单的JavaScript。 标签上方的代码:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
要从外部源获取json数据,可以使用XMLHTTTPREQUEST对象将HTTP请求从客户端发送到服务器或其他服务器。 该对象的常见示例如下:
var req = new XMLHttpRequest();
req.responseType = 'json';
req.open('GET', url, true);
req.onload = function() {
var jsonResponse = req.response;
// do something with jsonResponse
};
req.send(null);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.