利用ajax和后台来传递数据的方法教程
程序员文章站
2022-04-25 19:55:16
第一步：先引入jquery
第二步：编辑输入框
第三步：用ajax提交
第四步：后台程序的接受
最后的结果
解释：get是在url后面传输数据，然后可以在后台接受并转化为对象，然后再引用。...
第一步：先引入jquery
第二步：编辑输入框
第三步：用ajax提交
第四步：后台程序的接受
最后的结果
解释：get是在url后面传输数据，然后可以在后台接受并转化为对象，然后再引用。
前台html代码（vue,bootstrap,jquery网上都有下的）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vue.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#settext{
width: 100%;
height: 100%;
position: absolute;
background: #ccc;
top:0px;
}
</style>
</head>
<body>
<ul id="ul"></ul>
<p id="settext">
文章名:<input type="text" id="titlename">
<p>文章内容</p>
<textarea id="txt"></textarea><br>
<button id="btn">提交</button>
<button id="close">关闭</button>
</p>
<script type="text/javascript">
//提交写入后台
btn.onclick = function(){
$.ajax({
'url':'https://localhost:3000',
'type':'get',
'data':{
'titlename':titlename.value,
'txt':txt.value
},
success:function(data){
console.log(data);
}
})
}
</script>
</body>
</html>
后台node.js代码：
var http = require('http');
var urllib = require('url');
var querystring = require('querystring');
var server = http.createserver(function(req,res){
res.setheader('access-control-allow-origin','*');
var json = urllib.parse(req.url,true).query;
console.log('url地址：' + req.url);
console.log(json.titlename);
}).listen(3000,'127.0.0.1');
console.log('running at 127.0.0.1:3000');