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未初始化的问题。

  • 相关阅读:
    Java内部类
    Java创建对象的初始化顺序
    Java多态与动态绑定
    Java访问修饰符
    Django框架学习----视图与模板(详情页的上下篇文章跳转跳转)
    Django框架学习----视图与模板(首页与详情页的跳转)
    Django框架学习----视图与模板(显示数据库数据到页面)
    Django框架学习----视图与模板(网站页面设计)
    Django框架学习----模型层
    Logstash同步mysql数据库信息到ES
  • 原文地址:https://www.cnblogs.com/heyang78/p/7518141.html
Copyright © 2011-2022 走看看