Javascript 在html中加载JSON文件_Javascript_Jquery_Html_Json

Javascript 在html中加载JSON文件

javascript jquery html json

Javascript 在html中加载JSON文件,javascript,jquery,html,json,Javascript,Jquery,Html,Json,嘿，伙计们，我在加载json文件时遇到了一个问题。当我点击应该加载它的按钮时，什么都没有发生。新的HTML，所以任何帮助将非常感谢。这只是函数，而不是整个文件 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" th:replace="~{fragments/layout :: layout (~{::body},'hello')}"> <body style="background-color:gre

嘿，伙计们，我在加载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>

函数myFunction{ var inputField=document.getElementByIdinput； var-fr=null；如果输入.files&&input.files[0]{ fr=新文件读取器； fr.onload=函数{ 结果； }; fr.readAsTextinputField.files[0]； }否则 alertplz选择一个文件； }

您可以尝试以下方法：

<!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>

谢谢你的帮助。不幸的是，仍然没有发生任何事情，我真的不明白。我更新了代码，它似乎仍然没有做任何事情。我看到你编辑了你的问题@JohnDoe。由于缺少jQuery库，您需要编辑标记：

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