AJAX遇到的问题

Posted 唥小雨

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AJAX遇到的问题相关的知识,希望对你有一定的参考价值。

AJAX遇到的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX</title>
</head>
<body>
    <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
    <button type="button" onclick="loadXMLDoc()">修改内容</button>
  
      
</body>
<script>
    function loadXMLDoc(params) {
        var xmlhttp;
        if(window.XMLHttpRequest){
            xmlhttp = new XMLHttpRequest();
        }else{
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange= function() {
            if(xmlhttp.readyState== 4&& xmlhttp.status== 200){
                var text =xmlhttp.responseText;
                var result =JSON.parse(text);
                 var arraymes =result.message;
                 console.log(arraymes)
                 var box="<div>"
                 for(var i=0; i<=arraymes.length; i++){
                     var name =arraymes[i].name;
                     console.log(name)
                     console.log(arraymes[i].image_src)
                    box +='<span>'+arraymes[i].name+'<span>';
                    box += "<image src="+arraymes[i].image_src+"/>";
                    box += "<br>"
                 }
                 box+="</div>"
                 console.log(box)
                 document.getElementById("myDiv").innerHTML=box;
                 
                // console.log(arraymes);
            }
        }
        xmlhttp.open("GET","https://api-hmugo-web.itheima.net/api/public/v1/home/catitems",true);
        xmlhttp.send();
    }

</script>
</html>

最后解决了
问题是:
在数组遍历的时候多打了个“=”导致下标找不到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX</title>
</head>
<body>
    <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
    <button type="button" onclick="loadXMLDoc()">修改内容</button>
  
    <image class="" src="" mode="aspectFit|aspectFill|widthFix" />
      
</body>
<script>
    function loadXMLDoc(params) {
        var xmlhttp;
        if(window.XMLHttpRequest){
            xmlhttp = new XMLHttpRequest();
        }else{
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        
        xmlhttp.onreadystatechange= function() {
            if(xmlhttp.readyState== 4&& xmlhttp.status== 200){
                var text =xmlhttp.responseText;
                var result =JSON.parse(text);
                 var arraymes =result.message;
                 console.log(arraymes)
                 var box="<div>"
                 for(var i=0; i<arraymes.length; i++){
                    //  var name =arraymes[i].name;
                    box +='<span>'+arraymes[i].name+'<span>';
                    box += '<image src="'+arraymes[i].image_src+'"/>';
                    box += "<br>"
                 }
                 box+="</div>"
                 console.log(box)
                 document.getElementById("myDiv").innerHTML=box;
                 
                // console.log(arraymes);
            }
        }
        xmlhttp.open("GET","https://api-hmugo-web.itheima.net/api/public/v1/home/catitems",true);
        xmlhttp.send();
    }

</script>
</html>

以上是关于AJAX遇到的问题的主要内容,如果未能解决你的问题,请参考以下文章

AJAX相关JS代码片段和部分浏览器模型

Javascript代码片段在drupal中不起作用

执行AJAX返回HTML片段中的JavaScript脚本

Ajax + Spring Webflow

Ajax 片段元标记 - Googlebot 未读取页面内容

AJAX 响应:数据(JSON、XML)还是 HTML 片段? [关闭]