zoukankan      html  css  js  c++  java
  • Node.js的静态页面想通过jQuery的Ajax函数调用远程服务的措施无效

    程序下载:https://files.cnblogs.com/files/xiandedanteng/nodejsMakejqueryAjaxInvalid.rar

    http://www.cnblogs.com/xiandedanteng/p/7517398.html  这个例子中,使用静态页面调用angularjs库去获取SpringBoot提供的JSon列表失败了。

    于是我换了jQuery的库,jQuery的dom操作还有效,但ajax操作就无效了,页面代码如下:

    <!DOCTYPE html>
    <html lang="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <head>
         <title>Node.js静态页面展示</title>
         <link rel='stylesheet' href='/css/style.css'/>
         <!-- <script src="/js/jquery-1.7.2.min.js" type="text/javascript"/> 这样写整个页面出不来-->
         <script src="/js/jquery-1.7.2.min.js" type="text/javascript"></script>
         <script src="/js/test.js" type="text/javascript"></script>
        </head>
    
         <body onload="run()">
            <div class="main">
                <div class="content">
                    <div>
                        <img src="/img/jkx.png"/>
                    </div>
                </div>
            </div>
            <div class="side">
                    <ul>
                        <li>菜单一</li>
                        <li>菜单二</li>
                        <li>菜单三</li>
                        <li>菜单四</li>
                    </ul>
            </div>
         </body>
    </html>
    <script type="text/javascript">
    <!--
    function run(){
        //changeLiText();
    }
    
    /*****************************************************
    * 窗口载入时调用的启动函数
    *****************************************************/
    $(document).ready(function() {
        $(".side ul li").html("1");    
        
        loadRemoteData();
    });
    
    /*****************************************************
    * 取出远程服务器数据
    *****************************************************/
    function loadRemoteData(){
        var url="http://localhost:8080/list";    
        
        $.ajax({
            url: url,// 请求的地址
            data:{url:url},// 请求参数
            type: "get",// 请求方式
            success: function(data) {
                // 成功时的回调函数
                alert($(data).text());            
            },
            timeout: 5000,// 超时时间,超时后会调用error后的函数
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                var errMsg="";
                errMsg+=("XMLHttpRequest.status="+XMLHttpRequest.status);
                errMsg+=("XMLHttpRequest.readyState="+XMLHttpRequest.readyState);
                errMsg+=("textStatus="+textStatus);
                alert(errMsg);
    
                // 404 请求地址无效
                if(XMLHttpRequest.status=='404'){
                    alert("执行loadRemoteData()函数时,请求地址无效");
                    
                    return;
                }
            
                // 请求失败时被调用的函数
                alert("执行loadRemoteData()函数时,请求超时5000毫秒无响应");
            }
        
        });
    }
    //-->
    </script>

    把页面调起来出现alert,提示:

    XMLHttpRequest.status=0
    XMLHttpRequest.readyState=0
    textStatus=error

    这个明显是xhr尚未初始化的状态,何谈调用远程服务。

    看来jQuery和AngularJS一样出现了xhr未初始化的问题。

  • 相关阅读:
    某公司面试的SQL题目
    列存储索引
    JList动态添加元素
    Java中堆、栈、常量池等概念解析
    JButton大小设置问题?
    JAVA中定时器的使用
    线性表和链表的区别
    JTable表头显示问题以及如何让某行选中
    JPanel如何设置背景图片
    关于Scanner调用nextInt()异常try后不能二次输入问题
  • 原文地址:https://www.cnblogs.com/heyang78/p/7518141.html
Copyright © 2011-2022 走看看