原生Ajax,前后端代码

最新推荐文章于 2024-01-13 22:40:12 发布
最新推荐文章于 2024-01-13 22:40:12 发布
阅读量543 收藏
点赞数
文章标签： ajax elementui vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62782752/article/details/121758991
版权

前端

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#show{
				margin: 10px;
			}
			#show>table{
				border: 1px solid red;
				border-collapse: collapse;
			}
			#show>table th,
			#show>table td
			{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="entry">
				<div>
					<label>
						姓名:<input type="text" id="user"/>
					</label>
					<label>
						年龄:<input type="number" id="age"/>
					</label>
				</div>
				<div>
					<button type="button" id="addGet">addGet</button>
					<button type="button" id="addPost">addPost</button>
				</div>
			</div>
			<div id="show">
				<table>
					<thead>
						<tr>
							<th>序号</th>
							<th>ID</th>
							<th>姓名</th>
							<th>年龄</th>
							<th>添加时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<!-- <tr>
							<td>1</td>
							<td>123</td>
							<td>kky</td>
							<td>18</td>
							<td>2021-12-02 10:55:01</td>
							<td>
								<button type="button">getDel 删除</button>
								<button type="button">postDel 删除</button>
							</td>
						</tr> -->
					</tbody>
				</table>
			</div>
		</div>
		<script>
			/* 
				KKY P3 学员信息系统(kkyP3)
			
			根据业务决定
			
			 1网站功能:
			 1. 添加 两种方式GET和POST
			 2. 获取 get方式 和 POST ,渲染到一个表格中
			 3. 删除 两种方式 GET 和 POST
			 
			 2.字段
			 姓名 user
			 年龄 age
			 
			 
			 前后端商量出来的
			 3.接口文档
				接口1 添加 addGet GET /addGet 			user,age必填 返回{code:200,msg:"addGet 添加成功"}
				接口1 添加 addPost POST /addPost 		user,age必填 返回{code:200,msg:"addPost 添加成功"}
				
				接口2 获取 getData GET /getData 无 		返回{code:200,msg:"getData 获取成功",data:data} ,data=[{user:"kky",age:18}],user,age
				接口4 获取 postData POST /postData 无 	返回{code:200,msg:"postData 获取成功",data:data} ,data=[{user:"kky",age:18}],user,age
				
				接口5 删除 getDel GET /getDel  id 必填 	返回{code:200,msg:"getDel 删除成功"}
				接口6 删除 postDel POST /postDel  id 必填 	返回{code:200,msg:"getDel 删除成功"}
			 
			 
			 */
			//全局
			
			
			
			
			;(function(){
					var user = document.getElementById("user");
					var age = document.getElementById("age");
					
					var addGet = document.getElementById("addGet");
					var addPost = document.getElementById("addPost");
					
					
					
					//调用getDataAjax
					var getDataUrl="http://127.0.0.1:85/getData";
					getDataAjax(getDataUrl);
					
					//调用postDataAjax
					var postDataUrl="http://127.0.0.1:85/postData";
					// postDataAjax(postDataUrl)
					
					
					//通过get方式添加
					addGet.onclick=function(){
						var userV=user.value;
						var ageV=age.value;
						if(userV&&ageV){
							//序列化 数据
							var data="user="+userV+"&age="+ageV;
							// var data=`user=${userV}&age=${ageV}`;
							
							//接口地址+数据
							var url="http://127.0.0.1:85/addGet?"+data;
							
							//调用 addGetAjax
							addGetAjax(url);
							
							
						}else{
							alert("姓名或年龄不能为空");
						}
					}
					
					//通过post方式添加
					addPost.onclick=function(){
						var userV=user.value;
						var ageV=age.value;
						if(userV&&ageV){
							var data="user="+userV+"&age="+ageV;
							var url="http://127.0.0.1:85/addPost";
							
							//调用addPostAjax
							addPostAjax(url,data);
							
						}else{
							alert("姓名或年龄不能为空");
						}
					}
					
			}());
			
			
			
			//通过ajax get 方式添加数据
			function addGetAjax(url){
				var xhr=new XMLHttpRequest();
				xhr.open("get",url);
				xhr.send();
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4&&xhr.status==200){
						var str=xhr.responseText;
						// console.log("str:",str);
						var strObj=JSON.parse(str);
						// console.log("strObj:",strObj);
						if(strObj.code==2021){
							// alert(strObj.msg);
							
							
							//调用getDataAjax
							var getDataUrl="http://127.0.0.1:85/getData";
							getDataAjax(getDataUrl);
							
						}
					}
				}
			}		
			
			//通过ajax post 方式添加数据
			function addPostAjax(url,data){
				var xhr=new XMLHttpRequest();
				xhr.open("post",url);
				xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
				xhr.send(data);
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4&&xhr.status==200){
						var str=xhr.responseText;
						// console.log("str:",str);
						var strObj=JSON.parse(str);
						// console.log("strObj:",strObj);
						if(strObj.code==2021){
							// alert(strObj.msg);
							
							
							
							//调用postDataAjax
							var postDataUrl="http://127.0.0.1:85/postData";
							postDataAjax(postDataUrl)
						}
					}
				}
			}
			
			//通过get方式获取数据
			function getDataAjax(url){
				var xhr=new XMLHttpRequest();
				xhr.open("get",url);
				xhr.send();
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4&&xhr.status==200){
						var str=xhr.responseText;
						// console.log('str:',str);
						var obj=JSON.parse(str);
						// console.log("obj:",obj);
						var arr=obj.data;
						// console.clear();//清除之前控制台所有的打印信息
						// console.log("getData arr:",arr);
						//调用showPage(arr);渲染页面
						showPage(arr);
					}
				}
			}
			
			//通过post方式获取数据
			function postDataAjax(url){
				var xhr=new XMLHttpRequest();
				xhr.open("post",url);
				xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
				xhr.send();
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4&&xhr.status==200){
						var str=xhr.responseText;
						// console.log('str:',str);
						var obj=JSON.parse(str);
						// console.log("obj:",obj);
						var arr=obj.data;
						// console.clear();//清除之前控制台所有的打印信息
						// console.log("pstData arr:",arr);
						
						//调用showPage(arr);渲染页面
						showPage(arr);
					}
				}
			}
			
			
			
			//渲染页面
			function showPage(arr){
				var tbody=document.querySelector("#show>table>tbody");
				var trs="";
				for(var i=0;i<arr.length;i++){
					trs+=`
						<tr>
							<td>${i+1}</td>
							<td>${arr[i].id}</td>
							<td>${arr[i].user}</td>
							<td>${arr[i].age}</td>
							<td>${timeFun(arr[i].time)}</td>
							<td>
								<button type="button" onclick=getDel('${arr[i].id}')>getDel 删除</button>
								<button type="button" onclick=postDel('${arr[i].id}')>postDel 删除</button>
							</td>
						</tr>
					`;
				}
				tbody.innerHTML=trs;
			}
			
			//通过get方式将id传给后端,后端将根据id删除指定数据
			function getDel(id){
				// console.log("getDel id:",id);
				var url="http://127.0.0.1:85/getDel?id="+id;
				var xhr=new XMLHttpRequest();
				xhr.open("get",url);
				xhr.send();
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4&&xhr.status==200){
						var str=xhr.responseText;
						// console.log("str:",str);
						var strObj=JSON.parse(str);
						// console.log("strObj:",strObj);
						if(strObj.code==2021){
							// alert(strObj.msg);
							
							
							//调用getDataAjax
							var getDataUrl="http://127.0.0.1:85/getData";
							getDataAjax(getDataUrl);
							
						}
					}
				}
			}
			
			
			//通过post方式将id传给后端,后端将根据id删除指定数据
			function postDel(id){
				// console.log("postDel id:",id);
				var url="http://127.0.0.1:85/postDel";
				var xhr=new XMLHttpRequest();
				xhr.open("post",url);
				xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
				xhr.send("id="+id);
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4&&xhr.status==200){
						var str=xhr.responseText;
						console.log("str:",str);
						var strObj=JSON.parse(str);
						// console.log("strObj:",strObj);
						if(strObj.code==2021){
							// alert(strObj.msg);
							
							
							
							//调用postDataAjax
							var postDataUrl="http://127.0.0.1:85/postData";
							postDataAjax(postDataUrl)
						}
					}
				}
			}
			
			function timeFun(time){
				var d=new Date(time);
				var year=d.getFullYear();
				var month=d.getMonth()+1;
				var date=d.getDate();
				
				var hours=d.getHours();
				var minustes=d.getMinutes();
				var seconds=d.getSeconds();
				
				return year+"-"+bu0(month)+"-"+bu0(date)+" "+bu0(hours)+":"+bu0(minustes)+":"+bu0(seconds);
			}
			
			function bu0(n){
				return n>10?n:('0'+n);
			}
		</script>
	</body>
</html>

后端

var http = require('http');
var url = require('url');
var fs = require('fs');
var querystring = require('querystring');

const PROT = 85;
var filePath="./data/data01.json";

var app = http.createServer(function(req,res){
    res.writeHead(200,{
        "content-type":"text/html;charset=utf-8",
        "Access-Control-Allow-Origin":"*",解决跨域问题
        "Access-Control-Allow-Methods": "POST,GET",
        'Access-Control-Allow-Headers':'Content-type',
    });
    // res.end("0后端服务创建成功");
    var pathname = url.parse(req.url).pathname;
    if(pathname=="/addGet"){
        var addGetObj=url.parse(req.url,true).query;
        console.log("01 addGet 前后端通信成功 addGetObj:",addGetObj);
        
        addReadWriteFile(filePath,addGetObj,function(){
            res.end(JSON.stringify({code:2021,msg:"addGet 添加成功"}));
        });

        
    }else if(pathname=="/addPost"){
        var str1="";
        req.on("data",function(s){
            str1+=s;
        });
        req.on("end",function(){
            var addPostObj=querystring.parse(str1);
            // console.log("02 addPost 前后端通信成功 addPostObj:",addPostObj);
            
            addReadWriteFile(filePath,addPostObj,function(){
                res.end(JSON.stringify({code:2021,msg:"addPost 添加成功"}));
            });

        })

    }else if(pathname=="/getData"){
        fs.readFile(filePath,'utf-8',function(err,data){
            if(err){
                console.log("getData 读取失败:\n",err);
            }else{
                // console.log("data:",data,typeof data);

                var obj1={code:2021,msg:"getData 获取数据成功",data:data};
                // res.end(JSON.stringify(obj1));

                var arr=JSON.parse(data);
                var obj2={code:2021,msg:"getData 获取数据成功",data:arr};
               
                res.end(JSON.stringify(obj2));
            }
        })
    }else if(pathname=="/postData"){
        fs.readFile(filePath,'utf-8',function(err,data){
            if(err){
                console.log("postData 读取失败:\n",err);
            }else{
                console.log("data:",data,typeof data);

                var arr=JSON.parse(data);
                var obj2={code:2021,msg:"postData 获取数据成功",data:arr};
               
                res.end(JSON.stringify(obj2));
            }
        })
    }else if(pathname=="/getDel"){
        var getDelObj=url.parse(req.url,true).query;
        console.log("01 getDel 前后端通信成功 getDelObj:",getDelObj);
        
        delReadWriteFile(filePath,getDelObj.id,function(){
            res.end(JSON.stringify({code:2021,msg:"getDel 删除成功"}));
        })

    }else if(pathname=="/postDel"){
        // console.log("1我是postDel,我执行了吗?");
        var str2="";
        req.on("data",function(s){
            str2+=s;
        });
        // console.log("2我是postDel,我执行了吗?");
        req.on("end",function(){
            // console.log("3我是postDel,我执行了吗?");
            var postDelObj=querystring.parse(str2);
            // console.log("01 postDel 前后端通信成功 postDelObj:",postDelObj);
        
            delReadWriteFile(filePath,postDelObj.id,function(){
                res.end(JSON.stringify({code:2021,msg:"postDel 删除成功"}));
            })
        })

    }else{
        res.end("2.接口不存在或空页面");
    }

});


app.listen(PROT,function(){
    console.log("服务创建成功 http://127.0.0.1:"+PROT);
});


//将前台发送的数据,添加到data02.json
function addReadWriteFile(filePath,obj,cb){
    // console.log("99999obj:",obj);
    fs.readFile(filePath,'utf-8',function(err,data){
        if(err){
            console.log("读取失败:\n",err);
        }else{
            console.log("data:",data);

            var arr=JSON.parse(data);
            obj.id=+new Date();
            obj.time=+new Date();
            arr.push(obj);
            var str=JSON.stringify(arr);

            fs.writeFile(filePath,str,function(err){
                if(err){
                    console.log("写入失败:\n",err);
                }else{
                    console.log("写入成功");
                    cb();
                }
            })

        }

    });
}

//根据前台发送的id,将data02.json中特定数据删除
function delReadWriteFile(filePath,id,cb){
    //
    fs.readFile(filePath,'utf-8',function(err,data){
        if(err){
            console.log("读取失败:\n",err);
        }else{
            console.log("data:",data);

            var arr=JSON.parse(data);
            console.log("delReadWriteFilearr:",arr);

            for(var i=0;i<arr.length;i++){
                if(arr[i].id==id){
                    arr.splice(i,1);
                    break;
                }
            }

            var str=JSON.stringify(arr);

            fs.writeFile(filePath,str,function(err){
                if(err){
                    console.log("写入失败:\n",err);
                }else{
                    console.log("写入成功");
                    cb();
                }
            })

        }

    });
    //
}

m0_62782752
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax通过get方式实现前后端连接交互，传输数据
YY的博客
11-07 3360
responseText、readystatechange、xhr.status、http状态码、open（）配置方法
使用ajax后台代码,前端与后端ajax交互方法总结（附代码）
weixin_42525798的博客
08-05 1087
这次给大家带来前端与后端ajax交互方法总结(附代码)，前端与后端ajax交互的注意事项有哪些，下面就是实战案例，一起来看一下。前端ajax与后端Spring MVC控制器有以下五种数据交互方式。(前台使用了dhtmlxGrid,后端使用了fastjson)方式一 通过URL传参通过URL挂接参数，如/auth/getUser?userid='6'服务器端方法可编写为：getUser(String...
原生Ajax的使用，四种请求方法示例（前后端代码）
最新发布
kkkys_kkk的博客
01-13 3525
这样可以避免整个页面的刷新，提高用户体验。3. 异步加载数据：原生 Ajax 可以用于异步加载数据，例如从服务器获取 JSON、XML 或纯文本数据，并用于更新页面的内容。2. 原生支持：原生 Ajax 是由浏览器原生支持的技术，无需引入额外的库或框架，可以直接使用浏览器提供的 API。例如，可以使用原生 Ajax 在用户点击按钮或链接时加载新的数据，然后将数据动态地插入到已有的页面中，实现无刷新的内容更新。对于一些高级的功能，例如处理异步请求的回调地狱、安全性等问题，可能需要更加细致的处理和实施。
完整ajax前后端,$.ajax() 前后端的交互
weixin_31270363的博客
08-05 393
通过 ajax 进行前后端交互，主要就是定义数据类传输类型，contentType 是规定客户端发送给服务器的数据格式；dataType 是规定服务器发送给客户端的数据格式。1. contentType正常情况下是 ： application/x-www-form-urlencoded， 这种格式的特点就是 name/value 的格式。 例如： name=xuqh&value=2222但...
jquery中ajax 从前端到后端 完整过程解析
weixin_33804990的博客
06-08 638
几个原则： 1.get方式访问浏览器时，常加参数缘由： GET访问浏览器是等幂的，就是一个相同的URL只有一个结果[相同是指整个URL字符串完全匹配]，所以第二次访问的时候如果 URL字符串没变化，浏览器是 直接拿出了第一次访问的结果。POST则认为是一个变动性访问 （浏览器认为POST的提交必定是有改变的）防止GET的等幂访问就在URL后面加上？+new Date();[总之就是使每次访问的...
原生JS进行前后端同构
10-18
**前后端同构**是指在开发Web应用时，利用JavaScript技术使得前端和后端能够共享同一份代码，从而实现统一的页面渲染逻辑。这既包括首次加载时由服务器端渲染HTML，也包括后续用户交互时由客户端进行动态更新。这种...
Node之简单的前后端交互(实例讲解)
08-28
Node.js 之简单的前后端交互实例讲解 Node.js 是前端必学的一门技能，我们都知道 Node.js 用 JavaScript 做后端，在学习 Node.js 之前...但是，这个实例应该能够帮助您了解 Node.js 和 Ajax 是如何实现前后端交互的。
基于jsp+servlet、使用原生ajax，实现单表增删改查、文件上传、条件查询和分页
05-22
在Java Web开发中，"基于jsp+servlet、使用原生ajax，实现单表增删改查、文件上传、条件查询和分页" 是一个常见的实战项目，非常适合初学者熟悉整个Web应用开发流程。这个项目主要涵盖了以下几个核心知识点： 1. **...
截取图片+ajax传图，前后端都有
09-23
【标题】"截取图片+ajax传图"技术在前后端的应用详解 在现代Web开发中，用户交互体验越来越重要，而"截取图片+ajax传图"正是提高这种体验的有效方式之一。这一技术组合允许用户在前端进行屏幕截图，并通过Ajax异步...
ssm + maven整合，前后端分离技术完整源码
03-25
总的来说，"ssm + maven整合，前后端分离技术完整源码"是一个包含完整开发流程的项目，涵盖了从项目构建、SSM框架集成到前后端通信的诸多环节。开发者可以通过研究这个源码，学习如何在实际项目中运用这些技术，提升...
原生ajax代码实现异步提交
02-11
原生ajax代码实现异步提交，用传统的ajax实现异步提交判断用户名是否存在，详细和完整的步骤，可运行
前后端数据交互——ajax（原生及jquery）
weixin_64037609的博客
10-23 1万+
前后端数据交互——ajax（原生及jquery）
前端学习之ajax
weixin_53105591的博客
07-20 420
学习前端之ajax
Ajax（异步的js和xml）
giao211的博客
04-17 87
HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的规则。头 Content-Type: text/html;体 username=admin&password=admin。行 POST /s?<h1>一级标题</h1>行 HTTP/1.1 200 OK。体 <html>
【Web前端】Ajax超详解
将冲破艾迪i的博客
04-22 3628
本文共计两万四千字，详细的介绍了前后端交互的内容，以及Ajax的实现方式，包括XHR、Fetch和Axios。
ajax示例
while(life)++；
03-03 675
目录1、ajax以form形式发送数据1.1 ajax代码1.2 后端代码2、ajax以JSON形式发送数据2.1 ajax代码2.2 后端代码3、ajax以form形式发送list数据3.1 ajax代码3.2 后端代码 1、ajax以form形式发送数据 1.1 ajax代码 这里的contentType值是application/x-www-form-urlencoded，是默认的，不写也...
原生Ajax代码
qq_42931285的博客
09-13 280
分为四部分： 1、创建 XMLHttpRequest 对象 var xhr = new XMLHttpRequest(); 2、向服务器发送请求，使用 xmlHttpRequest 对象的 open 3、发送send 方法， 4、监听状态变化，执行相应回调函数 let xhr = new XMLHttpRequest(); xhr.open("get",'aabb.php',ture); xhr.onreadystatechange=function(){ if(xhr.readyState==4&
ajax前后端数据交互(简单的登录demo)
热门推荐
pirate_zhangfan的博客
09-05 2万+
前端： html： js(ajax)： js(记住密码)： 后端： Apiresponse: UserController: 登陆验证： 设置cookie: 从cookie获取用户名密码并向前端传参： 配置session拦截器： ...
AJAX（前端向）
weixin_44602489的博客
03-19 227
什么是AJAX呢 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML） AJAX不是新的语言，可以在js运行，新方法。 异步同步？ 在现实中同步是两个人跑步齐头并进，异步是一快一慢。 但在js里 异步是指两个分开处理，同步是指两个一个跟一个逐条处理。 多进程同时处理也就是异步处理的时候可以调高程序效率 AJAX异步加载数据 有顺序...
formdata提交表单前后端代码
04-28
发送FormData可以使用原生的XMLHttpRequest对象，也可以使用ajax方法。下面以ajax方法为例： ``` // 获取表单元素和数据 let form = document.querySelector('#myForm'); let formData = new FormData(form); // ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值