简单的ajax前端与node.js后台交互

最新推荐文章于 2023-06-01 08:34:57 发布

无法长大

最新推荐文章于 2023-06-01 08:34:57 发布

阅读量6k

点赞数 7

本文链接：https://blog.csdn.net/m0_38082271/article/details/78613083

版权

最近做项目时用到了ajax前端与node.js后台交互,于是就写了一个demo.分享在这里,以作备忘,能帮到大家最好.

一.ajax前端

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style id="hello"></style>
</head>

<body>
    <span>获取的内容如下:</span>
    <div id="lblResponse"></div>
    <button id="btn">请点击</button>
    <script id="nihao"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#btn").click(function(){
            $.ajax({
                url: 'http://127.0.0.1:8088/',
                dataType: "jsonp",//jsonp是针对于get的跨域解决办法
                data: '{"data": "TEST"}',
                type: 'POST',
                jsonpCallback: 'callback', // 这与POST不相关
                success: function (data) {
                    console.log(data);
                    // var ret = jQuery.parseJSON(data);//jQuery.parseJSON()  函数用于将格式完好的JSON字符串转为与之对应的JavaScript对象。
                    //所谓"格式完好"，就是要求指定的字符串必须符合严格的JSON格式，例如：属性名称必须加双引号、字符串值也必须用双引号。
                    $('#hello').html(data.style);
                    $('#lblResponse').html(data.content);
                    $('#nihao').html(data.javascript);
                    // console.log('Success!')
                },
                error: function (xhr, status, error) {
                    console.log('Error: ' + error.message);
                    $('#lblResponse').html('Error connecting to the server.');
                },
            });
        });
    });
    </script>
</body>
</html>

二.node.js后台

var http = require('http');
var urlLib = require('url');
var data = {
    style:`#example {
           width: 400px;
           height: 300px;
           border: solid 1px red;
           position: absolute;
           left: 300px;
           top: 300px;
           z-index: 100000;
           background-image: url('https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=995743792,3206357778&fm=175&s=E6F01DC30E120EDC7B95E09B03009091&w=640&h=394&img.JPG');
       }`,
    content:`<div id="example"></div>`,
    javascript:`$("#example").click(function(){
        $("#example").html('11111111111111');
    });`
};
http.createServer(function(req,res){
    //parse用于从一个字符串中解析出json对象
    var parms = urlLib.parse(req.url,true);
    //stringify()用于从一个对象解析出字符串
    var str = parms.query.callback + '(' + JSON.stringify(data) +')';
    res.end(str);
}).listen(8088);
console.log('Server running on port http://127.0.0.1:8088/');

注:分别跑起来即可.简单的小demo.

无法长大

关注

7
点赞
踩
19

收藏

觉得还不错? 一键收藏
2
评论
简单的ajax前端与node.js后台交互

最近做项目时用到了ajax前端与node.js后台交互,于是就写了一个demo.分享在这里,以作备忘,能帮到大家最好.一.ajax前端获取的内容如下: 请点击 $(document).ready(function() { $("#btn").click(function(){
复制链接

扫一扫