您的位置：首页 > Web前端 > Node.js

nodejs实现简单的评论功能

2016-08-09 14:53 162 查看 
1. 创建一个表单页面
<!DOCTYPE html>
<html>
<head>
<title>Test Ajax</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css"/>
<script src="../jquery-3.0.0.js"></script>
</head>

<body>
<form id="form1" action="#">
<p>Comment</p>
<p>
<label for="name">name:</label>
<input type="text" id="name" type="name" value="chengzhen"/>
</p>

<p>
<label for="content">content</label>
<input type="text" id="content" name="content" value="Hello"/>
</p>

<p>
<button type="button" id="send">send</button>
</p>
</form>

<div id="comments">
<h6>chengzhen</h6>
<p>This is a good afternoon</p>

<h6>libai</h6>
<p>Never stop learning</p>

<h6>dufu</h6>
<p>Believe in yourself</p>

<h6></h6>
<p></p>
</div>
<script src="./action.js"></script>
</body>
</html>

2.nodejs页面

var http=require("http");
var querystring=require("querystring");
var url=require("url");

var server=http.createServer(function(req,res){
/*	var body="";
req.on("data",function(){
body+=data;
});
console.log(body);
*/
var text=req.url;
console.log("url="+url);
res.writeHead(200,{"Content-Type":"application/json"});

var url_query=url.parse(text).query;
var query_object=querystring.parse(url_query);
console.log(query_object);
/*var response_text="<h6>"+query_object.name+"</h6>"+
"<p>"+query_object.content+"</p>";*/
var str=JSON.stringify(query_object)
res.write(str);
res.end();
});

server.listen(1337);




3.提交ajax请求

$("#send").click(function(){
var url="http://localhost:1337/";
$.get(url,{
name:$("#name").val(),
content:$("#content").val()
},function(data,textSattus){
//$("#comments").html(data);
/*var data_elem=$(data);
$("#comments").append(data_elem);*/

/*var name=data.name;
var content=data.content;*/
console.log(data);
console.log(typeof data);

var name=data.name;
var content=data.content;
$("#comments h6:last").text(name);
$("#comments p:last").text(content);

})
});


一个简单的ajax get请求就完成啦！ Have a good time
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航