前后端交互 --- ajax使用

一.浅谈前后端分离

核心思想

前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。

为什么要前后端分离？

最重要一点就是术业有专攻，前端和后端各自负责各自擅长的领域，做出来的东西必定比通通包揽一起做要好
前端追求的是：页面表现，速度流畅，兼容性，用户体验等等。后端追求的是：三高（高并发，高可用，高性能），安全，存储，业务等等。
这篇文章解释的比较清楚，推荐一看：为什么要前后端分离？

二.样例

后端

@RequestMapping("/login")
@CrossOrigin
@Slf4j
@Controller
public class LoginController {

    @RequestMapping("/index")
    public String index(){
        return "index";
    }

    @ResponseBody
    @RequestMapping("/testAjax")
    public AjaxResult testAjax(){
        return new AjaxResult().ok("hello ajax");
    }

    @ResponseBody
    @RequestMapping("/testAjax1")
    public AjaxResult testAjax1(@RequestParam("args")String args){
        return new AjaxResult().ok(args+"服务端返回");
    }
}

前端

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/popper.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
</head>
<body>

<script>
    //以上所有方法全部都可以用ajax()实现
    $.ajax({
        //发送请求地址（默认当前页地址）
        url      : String,
        //请求方式(默认get) 可选：get/post/put(部分)/delete(部分)
        type     : String,
        //延迟毫秒数
        timeout  : Number,
        //发送至服务器的数据
        data     : Object/String,
        //预期服务器返回类型 可选：xml/html/script/json/jsonp/text
        dataType : String,
        //发送前修改XMLHttpRequest对象函数
        //以下this均为本次调用Ajax传递的options参数
        beforeSend : function(XMLHttpRequest){ this; },
        //完成后的回调函数
        complete : function(XMLHttpRequest,textStatus){ this; },
        //调用成功的回调函数  data可能是html/text/..
        success : function(data,textStatus){ this; }
        //请求失败时返回的函数 通常后两个参数只有一个包含信息
        error : function(XMLHttpRequest,textStatus,errorThrown){ this;}
        //是否出发全局Ajax事件
        global: Boolean
    })
</script>

<div>
    <button id="send" class="send" onclick="123"></button>
</div>
<!--前端接收后端结果-->
<script id="123">
    $(function(){
        $('#send').click(function(){
            $.ajax({
                type: "GET",
                url: "http://localhost:8080/login/testAjax",
                //data: {username:$("#username").val(), content:$("#content").val()},
                dataType: "json",
                success: function(data){
                    alert(data["sData"]);
                },
                error:function () {
                    alert("请求失败");
                }
            });
        });
    });
</script>

<div>
    <form>
        <input id="i" name="args" type="text">
        <input type="button" onclick="111">
    </form>
</div>
<!--前端传参给后端，接收后端处理后的结果-->
<script id="111">
    $(function(){
        $('#send').click(function(){
            $.ajax({
                type: "GET",
                url: "http://localhost:8080/login/testAjax1",
                data: {args:$("#i").val()},
                dataType: "json",
                success: function(data){
                    alert(data["sData"]);
                }
            });
        });
    });
</script>
</body>
</html>

前后端交互 --- ajax使用

一.浅谈前后端分离

二.样例

猜你喜欢