nodejs篇之数据的最简单交互

第一种，是从后台取数据

首先，搭建node服务器

//server.js文件
//server服务器的配置  
var  http = require("http");

http.createServer((req,res)=>{
	
	res.writeHead(200,{"content-type":"text/html;chaset=utf-8","Access-Control-Allow-Origin":"*"})
	
	if(req.url!="/favicon.ico"){
		
		res.write("hello");
		res.end()
		
	}
	
}).listen(3000)

然后，发起ajax请求

 //demo.html中
<button id="btn">请求数据</button>
<p></p>


<script type="text/javascript">
$("#btn").click(
			function(){
				
				$.ajax({
					type:"get",
					url:"http://localhost:3000",
					success:function(data){
						$("p").text(data)
					}
				});
			}
		)
</script>

通过supervisor  server监听服务器，然后从页面点击按钮将会得到从服务器请求到的数据。

第二种，是将数据发送给服务器

首先，也是搭建服务器

//server.js文件
var  http = require("http");

http.createServer((req,res)=>{
	
	res.writeHead(200,{"content-type":"text/html;chaset=utf-8","Access-Control-Allow-Origin":"*"})
	
	if(req.url!="/favicon.ico"){
      //通过data事件接收从前端传过来的数据,得到的data是buffer格式，要通过toString（）转换成字符串
		req.on("data",(data)=>{
			console.log(data.toString())
		})
        //通过end事件对得到的数据进行处理
        req.on("end",()=>{
           
        })
	}
	
}).listen(3000)

发送数据

//demo.html
<input id="ipt" type="text"  />
<button id="btn">发送数据</button>


//发起ajax请求，传数据给服务器
<script type="text/javascript">
		$("#btn").click(function(){
			$.ajax({
				type:"post",
				url:"http://localhost:3000",
				data:{name:$('#ipt').val()},
				success:function(data){
					console.log(data)
				}
			});

		})
</script>

三、就是结合上面两种，既可以发送数据给服务器，也可以从服务器请求数据

//server.js
var  http = require("http");

http.createServer((req,res)=>{
	
	res.writeHead(200,{"content-type":"text/html;chaset=utf-8","Access-Control-Allow-Origin":"*"})
	
	if(req.url!="/favicon.ico"){
		 //服务器写入数据
		res.write("hello");
		res.end()
		//服务器接收前端数据
		req.on("data",(data)=>{
			console.log(data.toString())
		})
	}
	
}).listen(3000)

//demo.js
<input id="ipt" type="text"  />
<button id="btn">请求</button>


<script type="text/javascript">
		$("#btn").click(function(){
			$.ajax({
				type:"post",
				url:"http://localhost:3000",
				data:{name:$('#ipt').val()},
				success:function(data){
                    //提交数据成功之后回调，会得到服务器传回来的数据，即data
					console.log(data)
				}
			});

		})
</script>

HTML页面能和服务器做交互的前提是服务器开启，通过node 服务器文件名   来执行。