乐趣区

初学NodeJS二-Ajax

jiezi

关于 Ajax

封装好的 Ajax

前端往后端传递数据需要用到 Ajax 来传递。

  • 首先需要在网页链入这个已经封装好的 Ajax<script src="..."></script>，因为如果直接在 html 页面写这个的话不好看

  • 之后就可以利用 Ajax 来传递了

    //    前端页面

文件名：<input type='text' id="fileName"/>
文件内容：<textarea cols="30" rows="10" id="inner"></textarea>
<input type='button' value='写入文件' id='btn'/>

<script>
btn.onclick=function() {
  ajax({
    url:'localhost:1234',
    type:'get',
    data:{
        fileName:fileName.value,
        inner:inner.value
    },
    success:function(data){console.log('文件写入完毕');
    }
})  
}  
</script>
    • 首先要知道，封装好的 ajax 需要作者传递个 json 格式的参数进去
    • 其次，必须要有的是后端接口的地址 url，传输数据的方式type，前端传给后端的数据内容都写在data 内，success方法会自动传入个 data 参数，这个方法将处理成功接受到后端返回的数据

  • 假设我们后端想要写个文本文件

    // 后端页面
var http = require('http'),
urlLib = require('url'),
fs = require('fs');

// 利用 http 模块创建本地服务固定格式
http.createServer(function(req, res) {
    // 跨域，‘*’号表示所有
    res.setHeader('Access-Control-Allow-Origin', '*');
    
    // 利用 url 模块解析网页传递的地址数据
    var json = urlLib.parse(req.url, true).query;

    // 利用 fs 模块的 writeFile 方法写入文件
    fs.writeFile(json.file, json.inner, function(err) {if(err)console.log(err);
       console.log('生成完毕');  
    });
}).listen(1234);
    • http 模块的作用是让后台不用在 html 文件启动，直接启动本地服务器，在浏览器搜索栏输入 localhost:1234 即可，1234是后端自己设置的监听接口
    • url 模块的作用是如果用 get 方式传输数据的话，数据是可以在地址栏看到的，所以直接解析地址就可以得到前端传输的数据了
    • 利用 http 模块创建本地服务就可以不用在打开 html 文件，设置好的话后端会直接访问，用户访问网页只需要在浏览器输入 localhost:+ 监听接口号。
    • 跨域：跨域大致可以理解为在这个页面访问另一个文件。Access-Control-Allow-Origin表示允许的域，*表示所有，也就是说给予最高访问权限差不多意思。

  • 代码写好还不止，因为我们的 NodeJS 是后端语言，是网页脚本，所以需要‘‘启动’’。

    • 编写好代码之后需要进入脚本文件的文件夹内启动控制台 cmd，输入node xxx.js 这个 xxx 是你的脚本 js 文件的名字
    • 注意检查模块是否 已经下载好，是否进入正确的文件夹内。
退出移动版