nodejs实现简单的评论功能

最新推荐文章于 2022-10-01 02:13:22 发布

前端小白的江湖路

最新推荐文章于 2022-10-01 02:13:22 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： nodejs 文章标签： nodejs 表单 javascript

本文链接：https://blog.youkuaiyun.com/qq_21058391/article/details/52162736

nodejs 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的Ajax GET请求实现过程，包括HTML表单创建、Node.js服务器端响应及客户端使用jQuery发起请求并处理返回数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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