javascript - 如何在html中使用javascript重复解析json数据-6ren

javascript - 如何在html中使用javascript重复解析json数据

转载作者：行者123 更新时间：2023-11-28 10:48:05

24

4

我从 w3school 得到了这段代码，效果非常好:

    <!DOCTYPE html>
    <html>
    <body>

    <h1>Customers</h1>
    <div id="id01"></div>

    <script>
    var xmlhttp = new XMLHttpRequest();
    var url = "http://www.w3schools.com/website/customers_mysql.php";

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            myFunction(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();

    function myFunction(response) {
        var arr = JSON.parse(response);
        var i;
        var out = "<table>";

        for(i = 0; i < arr.length; i++) {
            out += "<tr><td>" +
            arr[i].Name +
            "</td><td>" +
            arr[i].City +
            "</td><td>" +
            arr[i].Country +
            "</td></tr>";
        }
        out += "</table>";
        document.getElementById("id01").innerHTML = out;
    }
    </script>

    </body>
    </html>

但是当我像这样重复脚本时它不起作用:

 <!DOCTYPE html>
    <html>
    <body>

    <h1>Customers</h1>
    <div id="id01"></div>

    <script>
    var xmlhttp = new XMLHttpRequest();
    var url = "http://www.w3schools.com/website/customers_mysql.php";

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            myFunction(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();

    function myFunction(response) {
        var arr = JSON.parse(response);
        var i;
        var out = "<table>";

        for(i = 0; i < arr.length; i++) {
            out += "<tr><td>" +
            arr[i].Name +
            "</td><td>" +
            arr[i].City +
            "</td><td>" +
            arr[i].Country +
            "</td></tr>";
        }
        out += "</table>";
        document.getElementById("id01").innerHTML = out;
    }
    </script>

<h1>Buyers</h1>
    <div id="id02"></div>

    <script>
    var xmlhttp = new XMLHttpRequest();
    var url = "http://www.w3schools.com/website/customers_mysql.php";

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            myFunction(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();

    function myFunction(response) {
        var arr = JSON.parse(response);
        var i;
        var out = "<table>";

        for(i = 0; i < arr.length; i++) {
            out += "<tr><td>" +
            arr[i].Name +
            "</td><td>" +
            arr[i].City +
            "</td><td>" +
            arr[i].Country +
            "</td></tr>";
        }
        out += "</table>";
        document.getElementById("id02").innerHTML = out;
    }
    </script>

    </body>
    </html>

我应该更改什么变量名称？我执行了一次脚本，但两次都不起作用。我尝试更改变量但没有成功我更改了所有变量名称。

最佳答案

您的两个脚本存在于同一个 JS 环境中。它们都创建同名的全局变量并且互相干扰。

将每个脚本包装在 IIFE 中为每个人创建一个新的操作范围。

<script>
    (function () {
         // Your code here
    })();
</script>

关于javascript - 如何在html中使用javascript重复解析json数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39228703/

24

4

0

文章推荐： html - 纯 css 幻灯片的下一个按钮

文章推荐： javascript - 如何在加载时自动更改外部js文件的url

文章推荐： ios - Swift 4 shouldChangeCharactersIn 只显示长度 = 12

文章推荐： javascript - php 按位异或和 js 按位异或产生不同的结果

javascript - 控制台错误 - 解析 AJAX JSON 解析
我一直在使用 AJAX 从我正在创建的网络服务中解析 JSON 数组时遇到问题。我的前端是一个简单的 ajax 和 jquery 组合，用于显示从我正在创建的网络服务返回的结果。尽管知道我的数据库查
xml - Json 解析 vs xml 解析？
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
android - java.lang.NoClassDefFoundError : com. 解析。解析
我在尝试运行 Android 应用程序时遇到问题并收到以下错误 java.lang.NoClassDefFoundError: com.parse.Parse 当我尝试运行该应用时。最佳答案在这
python - 解析 HTML 内容时防止 etree 解析 HTML 实体
有什么办法可以防止etree在解析HTML内容时解析HTML实体吗？ html = etree.HTML('&') html.find('.//body').text 这给了我 '&' 但我想
javascript - 使用 JSON 解析/解析 js 对象时，返回方法中的函数范围会丢失
我有一个有点疯狂的例子，但对于那些 JavaScript 函数作用域专家来说，它看起来是一个很好的练习: (function (global) { // our module number one
java - 使用 Java 解析 HTML 数据(DOM 解析)
关闭。此题需要details or clarity 。目前不接受答案。想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 8 年前。 Improve th
php - 在服务器上用 PHP 解析 HTML 还是在最终用户端用 JavaScript 解析 HTML 会更好？
我需要编写一个脚本来获取链接并解析链接页面的 HTML 以提取标题和其他一些数据，例如可能是简短的描述，就像您链接到 Facebook 上的内容一样。当用户向站点添加链接时将调用它，因此在客户端启动
node.js - 为什么 npm 包从/AppData 解析，而不是从 local/node_modules 解析？
在 VS Code 中本地开发时，包解析为 C:/Users//AppData/Local/Microsoft/TypeScript/3.5/node_modules/@types//index而不是
php - 解析 json 错误 : SyntaxError: JSON. 解析:JSON 数据的第 1 行第 2 列出现意外字符
我在将 json 从 php 解析为 javascript 时遇到问题这是我的示例代码: //function MethodAjax = function (wsFile, param) {
php - 解析 json 错误 : SyntaxError: JSON. 解析:JSON 数据的第 1 行第 2 列出现意外字符
我在将 json 从 php 解析为 javascript 时遇到问题这是我的示例代码: //function MethodAjax = function (wsFile, param) {
解析，在哪里可以了解
我被赋予了将一种语言“翻译”成另一种语言的工作。对于使用正则表达式的简单逐行方法来说，源代码过于灵活(复杂)。我在哪里可以了解更多关于词法分析和解析器的信息？最佳答案如果你想对这个主题产生“情绪化
正则表达式 {} 解析
您好，我在解析此文本时遇到问题 { { { {[system1];1;1;0.612509325}; {[system2];1;
JavaScript 解析？
我正在为 adobe after effects 在 extendscript 中编写一些代码，最终变成了 javascript。我有一个数组，我想只搜索单词“assemble”并返回整个 jc3_
JavaScript 解析
我有这段代码: $(document).ready(function() { // }); 问题:FB_RequireFeatures block 外部的代码先于其内部的代码执行。因此 who
解析.netcore项目中IStartupFilter使用教程
背景： netcore项目中有些服务是在通过中间件来通信的，比如orleans组件。它里面服务和客户端会指定网关和端口，我们只需要开放客户端给外界，服务端关闭端口。相当于去掉host，这样省掉了些
解析:继承ViewGroup后的子类如何重写onMeasure方法
1.首先贴上我试验成功的代码复制代码代码如下: protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
Python如何对XML 解析
什么是 XML？ XML 指可扩展标记语言（eXtensible Markup Language），标准通用标记语言的子集，是一种用于标记电子文件使其具有结构性的标记语言。你可以通过本站学习 X
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
【PHP代码】复制代码代码如下: $stmt = mssql_init('P__Global_Test', $conn) or die("initialize sto
解析:清除SQL被注入恶意病毒代码的语句
在SQL查询分析器执行以下代码就可以了。复制代码代码如下: declare @t varchar(255),@c varchar(255) declare table_cursor curs
【JavaScript】前端算法题40道题+解析
前言最近练习了一些前端算法题，现在做个总结，以下题目都是个人写法，并不是标准答案，如有错误欢迎指出，有对某道题有新的想法的友友也可以在评论区发表想法，互相学习🤭 题目题目一: 二维数组中的

首页

博学

6Ren·AI

商城

javascript - 如何在html中使用javascript重复解析json数据