JS 、后端接口暴露模板

最新推荐文章于 2023-04-06 09:54:12 发布

关掉别看了，再学就秃啦！

最新推荐文章于 2023-04-06 09:54:12 发布

阅读量541

点赞数

本文链接：https://blog.csdn.net/YYDS_emmm/article/details/119787438

版权

JS 、后端接口暴露模板

结构（手动创建）

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery Ajax Demo </title>
    <style>
        .box span{
            display: inline-block;
            min-width: 100px;
            margin-right: 20px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
  <div class = "box"></div>
  <script src = "lib/baidu_jquery2.js">  </script>  
  <script src = "js/index.js">  </script>
</body>
</html>

index.js

// 闭包
(function($){
    var DN = "http://localhost:8080"
    function ajaxCall(varUrl,varType,data,callback){
        $.ajax({
            url:`${DN}${varUrl}`,//后台数据接口暴露链接
            type:varType,//请求方式
            contentType:"application/x-www-form-urlencoded",//前端携带到后端的参数数据类型：字符串
            data:data,//前端携带的具体数据
            dataType:"json",//后端返回给前端的数据类型
            success:function(rst){
                if(callback && typeof(callback)=="function"){
                    callback(rst)
                }
            },  //提交成功后调用的回调函数
            error:function(e){
                 console.error(e)
            },//提交出异常后调用的回调函数
            async:true //异步传输：默认true

        })
    }

    //匿名函数作为回调函数
    ajaxCall("/user/top10.do","GET",{},function(rst){
        if(rst.code == 200){
            var arr =[]
            rst.t.forEach(e => {
                arr.push(`<div>
                            <span>${e.user_id}</span>
                            <span>${e.user_name}</span>
                            <span>${e.user_gender}</span>
                            <span>${e.user_phone}</span>
                        </div>`)
            });
            $(".box").html(arr.join(""))
        }else{
            console.log("请求失败")
        }
    })
})(jQuery)

前后端交互的主流格式

前端：讲json对象转化成json格式【字符串】 => 后端：通过【工具】将json格式字符串解析成Java对象
后端：讲java对象转化成json格式【字符串】 => 前端：通过【工具】将json格式子串串解析成json对象

关掉别看了，再学就秃啦！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 、后端接口暴露模板

JS 、后端接口暴露模板结构（手动创建）index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial
复制链接

扫一扫