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














本文转自张昺华-sky博客园博客,原文链接:http://www.cnblogs.com/xiandedanteng/p/7518141.html,如需转载请自行联系原作者


相关文章
|
7月前
|
JSON JavaScript 数据格式
jqtimeline.js-简单又好用的jquery时间轴插件
jqtimeline.js-简单又好用的jquery时间轴插件
|
8月前
|
数据采集 JavaScript 前端开发
nodejs中如何导入jQuery
Node.js虽为后端环境,但可通过npm安装jQuery并结合jsdom模拟DOM,从而在项目中使用前端库。本文介绍如何在Node.js中导入和使用jQuery,简化HTTP请求和页面操作,并提供Web爬虫示例,展示如何抓取网页标题。通过这种方式,开发者可以在不依赖浏览器的情况下复用已有jQuery代码,减少重复劳动并提高开发效率。
106 3
|
11月前
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
247 14
|
11月前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件,可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
153 5
|
12月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
259 3
|
11月前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
113 0
|
12月前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
132 0
|
12月前
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
70 0
|
12月前
|
JavaScript 前端开发
JavaScript三级联动jQuery写法
JavaScript三级联动jQuery写法
|
3月前
|
JavaScript Unix Linux
nvm与node.js的安装指南
通过以上步骤,你可以在各种操作系统上成功安装NVM和Node.js,从而在不同的项目中灵活切换Node.js版本。这种灵活性对于管理不同项目的环境依赖而言是非常重要的。
789 11