response.write()方法将指定的字符创输出到html页面时遇到的问题

最新推荐文章于 2023-05-25 13:19:33 发布
最新推荐文章于 2023-05-25 13:19:33 发布
阅读量3w 收藏 3
点赞数
分类专栏： nodejs 文章标签： res-write
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31411389/article/details/70717738
版权

逻辑描述：
index.html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../public/css/typo.css">
    <style>
        body{
            background-color: #3a4563;
        }
        #login{
            margin:230px auto auto;
            /*background: #ffd5d5;*/
            width: 250px;
            height:250px;
            /*border:1px solid green;*/
            /*-webkit-border-radius: 4px;*/
            /*-moz-border-radius: 4px;*/
            /*border-radius: 4px;*/
            text-align: center;
        }
        #username,#password{
            padding-left:8px;
            width:94%;
            margin-top:20px;
            height:30px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }
        #button{
            margin-top: 20px;
            webkit-display:flex;
            display: flex;
            justify-content:space-around;
        }
        #button span {
            cursor:pointer;
            padding:0 44px;
            display: inline-block;
            color: #ffffff;
            font-size: 16px;
            line-height: 30px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            text-decoration: none;
            background-color: #667cdf;
        }
    </style>
<body>
    <div id="login">
        <form action="">
            <input id="username" type="text" name="username" placeholder='请输入用户名'>
            <br>
            <input id="password" type="password" name="password">
            <br>
            <div id="button">
                <span class="login">登录</span >
                <span class="reg">注册</span >
            </div>
        </form>
    </div>
</body>
</html>
<script src="../public/js/jquery.js"></script>
<script src="../public/js/index.js"></script>

通过fs.readSynce()方法取到的index.html页面的内容赋值给变量body，
然后：

response.writeHead(200,{'Content-Type':'text/html'});//注意这里的html，如果为plain则不会显示html，会输出.html文件中的字符串
response.write(body);
response.end();

这样运行后会报错：

这里写图片描述

查看后发现：
这里写图片描述

外联的js和css文件都没有成功返回相应的数据。

原因：

这是因为这段代码中规定的’Content-Type’都是’text/html’类型。而css和js也必须得按照相应的Content-Type类型加载才能成功。

另附不同文件对应的不同类型：

    "html" : "text/html",  
    "css"  : "text/css",  
    "js"   : "text/javascript",  
    "json" : "application/json",  
    "ico"  : "image/x-icon",  
    "gif"  : "image/gif",  
    "jpeg" : "image/jpeg",  
    "jpg"  : "image/jpeg",  
    "png"  : "image/png",  
    "pdf"  : "application/pdf",  
    "svg"  : "image/svg+xml",  
    "swf"  : "application/x-shockwave-flash",  
    "tiff" : "image/tiff",  
    "txt"  : "text/plain",  
    "wav"  : "audio/x-wav",  
    "wma"  : "audio/x-ms-wma",  
    "wmv"  : "video/x-ms-wmv",  
    "xml"  : "text/xml"

如何做：

既然知道了原因我们应该如何做呢？我们需要搭建一个静态文件处理器，实现加载不同文件按不同的类型来加载。可以参开我的github。切换到lesson2分支。static-server文件夹下的static-load-server.js和static-server.js为主要代码。

尼古拉斯-托尔斯泰-赵四
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
node.js中的http.response.write方法使用说明
01-20
方法说明： 向请求的客户端发送响应内容。 在 response.end() 之前，response.write() 可以被执行多次。 语法： 代码如下: response.write(chunk, [encoding]) 参数： chunk                      是一个buffer 或 字符串，表示发送的内容 encoding                如果chunk是字符串，就需要指定encoding来说明它的编码方式，默认utf-8 例子： 代码如下: var http = require(‘http’); http.createServer(function
node.js中的http.response.end方法使用说明
01-02
方法说明： 结束响应，告诉客户端所有消息已经发送。当所有要返回的内容发送完毕时，该函数必须被调用一次。 如何不调用该函数，客户端将永远处于等待状态。 语法： 代码如下: response.end([data], [encoding]) 接收参数： data                           end()执行完毕后要输出的字符，如果指定了 data 的值，那就意味着在执行完 response.end() 之后，会接着执行一条 response.write(data , encoding); encoding                  对应data的字符编码 例子：
context.Response.Write()返回多个值到前台界else if (type == "CompanyChange") { str
qq_31584315的博客
07-30 1724
后台 else if (type == "CompanyChange") { string CompanyId = request["CompanyId"]; bindCompanyDepartment(CompanyId); string jsonString = "{\...
asp.net对象——Response、Request
王金龙
07-17 1046
response对象，从服务器发送信息到客户端，对发送过程进行控制 request对象，从客户端发送数据到服务器。获取用户在web表单中提交的信息或url中的参数，同时可以获取客户端信息
JavaWeb经典_08_jsp
qq_52922453的博客
05-25 68
在这里需要补充说明一点：我们在工作中，几乎都是使用静态包含。朝阳区只要有哪个明星有什么不好的事，他们都会知道，然后举报。那我们要输出一个复杂页面的时候，就更加的困难，而且不利于页面的维护和调试。监听器就是实时监视一些事物状态的程序，我们称为监听器。那么朝阳群众就是监听器，明星就是被监视的事物，举报就是响应的内容。报警器，就是监听器，电动车就是被监视的对象。静态包含是把包含的页面内容原封装不动的输出到包含的位置。动态包含是在执行的时候，才会加载。的动态页面技术帮助我们实现对页面的输出繁锁工作。
使用 Response.Write 向页面body中输出指定html
weixin_34306446的博客
06-25 3362
keywords:Response.Write , body 输出内容===========================================在编写asp.net web applicaion的时候我们需要直接在页面上输出相应的客户端代码（如：输出<span id=’clientid’ stype=’’></span>）。如果使用Response.Write...
ASP.NET页面对象 – Response
dodream的专栏
11-11 3526
    获取与该 Page 对象关联的 HttpResponse 对象。该对象使您得以将 HTTP 响应数据发送到客户端，并包含有关该响应的信息。 一、HttpResponse 类封装来自 ASP.NET 操作的 HTTP 响应信息。HttpResponse 类型公开以下成员。 构造函数 名称说明HttpResponse
原创-Asp.net导出word的方法总结（利用response.write方式将html模板导出word，和dsoframer导出word）...
weixin_34362875的博客
04-16 133
最近做项目用到了将整个页面导出word，原来用的dsoframer，发现导出的时候格式不是很好，随找了一个html模板方式导出word，现写出来供大家参考，并将步骤说与大家： 1、新建一个word文档，做成一个模板，需要填充数据库内容的地方用诸如{Year}的方式标记。 2、点击文件--另存为网页，起一个名字。比如xx.htm，关闭。 3、打开刚刚保存的htm文件，打开方式选择word，你会...
RESPONSE.WRITE和lt;%=%的区别
01-20
=%>都是ASP程序向客户端输出字符串的方法，虽然两者的结果相同但是其效果是不同的。 一般的来说我们大部分时间将<%=%>用于html与asp代码相混合的状态下，而Response.Write用于〈％……％〉脚本段中，但从...
C#中图片、二进制与字符串的相互转换方法
01-20
本文实例讲述了C#中图片、二进制与字符串的相互转换方法。分享给大家供大家参考，具体如下： protected void Button1_Click(object sender, EventArgs e) { //图片转二进制 byte[] imageByte = GetPictureData...
C#实现将字符串转换成日期格式的方法
01-20
本文实例讲述了C#实现将字符串转换成日期格式的方法。分享给大家供大家参考。具体实现方法如下： 代码如下:string s = “20120114161145”; Response.Write(DateTime.ParseExact(s, “yyyyMMddHHmmss”, new System...
workflow NewForm 后台写变量，前台取
yl_99的专栏
04-20 675
PageLoad: Response.Write("var txt_joinCID='" + txt_join.ClientID + "';");          function openWindow() {            var aa = '';            var sa1 = window.showModalDialog('/Cabin/AdminCente
前端项目和response.getWriter().write（xxxx）的理解
从小就很酷的博客
04-12 1万+
首选理解前端项目的实质：前端项目是依赖于浏览器而生存，就是浏览器中的页面而已，前端项目支持window.location.href="xxxx"或者ajax调用等那是因为浏览器支持它们，所以前端项目才这样写。 当浏览器是window.location.href="xxxx"方式调用时可以在接口中用response.getWriter().write（xxxx）返回给浏览器结果，和retur...
response.write()区别response.getWrite().write()
yilaguandemei的博客
01-22 3856
首先解释一下PrintWriter = response.getWriter(); wirte()是类PrintWriter提供的一个方法，是发送请求内容至页面，ajax常用到这个 request.getWriter（）返回PrintWriter对象，在调用它的writer方法把参数响应给用户即响应给客户端。response.write()是直接在页面输出内容 resphonse.write
Response对象的write方法
热门推荐
推荐系统-机器学习-数据挖掘的专栏
04-14 1万+
除了最简单的用response.write方法向浏览器端输出信息， 1.用HTML语法方式向浏览器发送字符串。使用write方法输出的字符串被浏览器按HTML语法进行解释，因此可以用write方法直接输出HTML代码，实现网页元素及格式的定制，在以下页面以表格布局方式显示查询数据库的记录。 xuehaoname
Response.Write在alert时可能导致页面布局的变化
qq_39806817的博客
03-04 162
        由于Response.Write是直接写入文档流，破坏文档流的输出顺序，直接输出在页面最顶部，可能导致页面布局的变化 这样写即可(不带注释的) //Response.Write("<script>alert('签到成功')</script>"); Page.ClientScript.RegisterStartupScript(this.GetType(), "alert", "<sc
AJAX访问asp.net需要后端返回并进入到ajax的error中，并将后端context.response.write中的字符串展现出来
最新发布
05-27
Response.Write("Your error message"); Response.StatusCode = (int)System.Net.HttpStatusCode.InternalServerError; Response.End(); ``` 然后在客户端使用jQuery的ajax方法处理响应并显示错误消息： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值