当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 利用ajax和后台来传递数据的方法教程

利用ajax和后台来传递数据的方法教程

2018年10月14日  | 移动技术网IT编程  | 我要评论

第一步：先引入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');

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网