简单的前后端交互流程（AJAX）

kumfo 发布于2019-08-22 10:41 / 1175人阅读

摘要：今天呢，我想要说的主题是工作中的前后端交互。古老的表单提交这种形式呢，比较早，以后端为主。前端提交表单，后端验证。后端基本就做接口，做权限，其他的都交由前端去完成。参数只有一个名字的值这个是后端人员规定的。

这是我写的第一篇文章，想想还有点小激动呢。本着助人为乐的思想，认识了一些前端的初学者，帮助他们更快的步入到前端这个一个行业。今天呢，我想要说的主题是：工作中的前后端交互。

1.古老的表单提交
    这种形式呢，比较早，以后端为主。前端提交表单，后端验证(jsp,request.getParameter(""))。这种方式后端做的比较多，我就不特别说明了。
2.AJAX的数据提交
    这种形式呢，现在用的较多。后端基本就做接口，做权限，其他的都交由前端去完成。这个呢就是我们今天主要说的。
3.表单和AJAX结合
    适合的才是最好的。这点我深信不疑

常见的几种方式，我已经说明了。接下来我们谈一谈我们需要什么东西。
场景一：

XXX:我们公司要做接口，我要怎么办？
LN:哦，接口文档发我看看。
XXX:什么是接口文档，我没有啊？
LN:接口文档由四部分组成：（这个看个人习惯有的写得特别简陋，所以第一次的时候问清楚每个参数意思）
    1.接口地址 URL
    2.请求方式 get/post
    3.请求参数 page,pageNum
    4.响应参数 state,list
XXX:哦哦，这样啊，那我和他们要一下。
    接口：/mvc/training/ge
    请求：key,orderBy,begin,length
LN:没给你响应，也没有给你请求方式啊。
    1.给接口补全URL,域名/mvc/training/ge。
    2.把你补全的URL，扔到浏览器的地址栏，看看返回的是什么。当然如果请求参数里面有必填项，那你要用URL?key=value&key2=value2的形式模拟get请求。
        2.1 浏览器把服务器端的响应给你显示了出来。然后你对照这个问后端人员每个是什么意思。
        2.2 抛出405错误。这个就比较凄惨了。禁止get请求，那你有两种方式一个是下载一款软件可以模拟post请求，一个是直接写AJAX，然后改成post方式。
    3.由上面我们已经知道接口的四部分了，那我们就要用ajax获取我的数据了.
     $.ajax({
             url: "/mvc/training/ge",//请求接口
             type: "POST",//请求方式
             data: {key:1},//请求参数
             dataType: "json",//响应类型
             success: function(data, textStatus){//访问成功的回调函数，参数是响应，描述状态的字符串
                 console.log(data);
             },
             error: function(XMLHttpRequest, textStatus, errorThrown){//访问失败的回调函数，参数是XMLHttpRequest对象、错误信息、捕获的错误对象(可选);
             }
    });
    个人大力推荐这个，第二步就可以省去了。success的console.log(data);也可以看到响应，完美的剧情。当然，你不要告诉我，你不会看控制台。
XXX:恩恩。好的。我试试去。

场景二：
XXX:这是我的接口。我要怎么做我的页面啊。逻辑怎么写。

LN:

$.ajax(
    method:"GET",//对于请求类型
    url:"/isNickName",//请求url，这个我抹黑了。直接复制过来就可以了
    dataType: "json",
    data: {nickName:$.trim($("#checktips").val())},//这个是一个验证是否重名的接口。参数只有一个 名字
).done(function(data){
    if(data.code == 0){//data.code的值这个是后端人员规定的。
        console.log("请求成功");
        if(data.object==1){//1为重复
            console.log("这个nickName重复啦");
            $("#retips").show();
        }else if(data.object==0){
            console.log("这个nickName不重复");
            $("#retips").hide();
        }else{
            console.log("未知异常");
        }
    }else if(data.code == -2){
        console.log("你没有权限，通常来讲，你是没有登录");
    }else if(data.code == -5){
        console.log("参数错误哦。");
    }else{
        console.log(data.result);
    }
}).fail(function(a,b,c){
    console.log("接口出问题啦");
})

我简单的解释一下上面这个代码，.done()里面的代码肯定每次都不一样。所以说肯定不能网上随便复制一个就可以，和公司的后端人员问清楚每一个参数的作用意义，对于写代码是特别有帮助的。从接口文档可以看出，这个人后端十分的懒，我所有的参数都是访问了以后然后自己猜出来的。

场景有上面的两个，我觉得已经可以了。就不在写了

文章的最后我们来说一下调用和 .done事件里面的代码虽然这两个没有关系。

1.调用
    最简单的调用方法$(selector).on("click",function(){里面放刚才场景二的代码})。
    但是我们有的时候用的不是click.
    blur 失去焦点的时候触发
    change 失去焦点然后判断是否改变，改变触发
    keyDown keyup 按下抬起（这个是最好的，但是要用去抖，下一篇说）
2.done(function(){})
    这个里面一般来说，就是我们用得到的数据去和我们的DOM节点做一些操作。这个每个项目都不一样。但是肯定都和DOM的操作啦渲染啦有关。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91071.html

一种SPA（单页面应用）架构

摘要：个人认为单页面应用的优势相当明显前后端职责分离，架构清晰前端进行交互逻辑，后端负责数据处理。上面的这种单页面应用也有其相应的一种开发工作流，当然这种工作流也适合非单页面应用进行产品功能原型设计。未经允许，请勿转载。本文同时也发布在我的博客。（如果对SPA概念不清楚的同学可以先自行了解相关概念）平时喜欢做点小页面来玩玩，并且一直采用单页面应用（Single Page Appl...

Codeing_ls 2019-08-21 12:23 评论0 收藏0
WEB程序的前后端数据交互流程

摘要：说明我写这篇文章的目的其实是想科普一下基础的数据传输和交互流程，其实也就是写协议相关的一些东西。同样，相对于后端程序来说也无外乎就是一大堆有一定意义的字符串，而对于脚本来说，就是表示一个数据对象。说明我写这篇文章的目的其实是想科普一下基础的数据传输和交互流程，其实也就是写http协议相关的一些东西。而写这篇文章也主要是源于最近和长久以来很多人问的问题都是有关于这块的（可能问题并不是...

oysun 2019-06-28 13:45 评论0 收藏0
关于前后端分离与模板引擎

摘要：但似乎他们的职责在以前甚至于现在都并不明确，虽然前端是跟浏览器打交道，但是最终浏览器拿到的页面是服务器通过模板生成的一个临时静态页面而已。当然，一般传统上的开发协作模式有两种一种是前端先写一个静态页面，写好后，让后端去套模板。随着不同终端（Pad/Mobile/PC)的兴起，对开发人员的要求越来越高，纯浏览器端的响应式已经不能满足用户体验的高要求，往往需要针对不同的终端开发定制的版本，为了提...

cnTomato 2019-04-23 13:40 评论0 收藏0
前端框架模式的变迁

摘要：现在在前端的框架都是的模式，还有像和之类的变种独特的单向数据流框架。只要将数据流进行规范，那么原来的模式还是大有可为的。我们可以来看一下，框架的图示从图中，我们可以看到形成了一条到，再到，之后是的，一条单向数据流。前言前端框架的变迁，体系架构的完善，使得我们只知道框架，却不明白它背后的道理。我们应该抱着一颗好奇心，在探索框架模式的变迁过程中，体会前人的一些理解和思考本篇将讲述的是...

ssshooter 2019-08-22 11:11 评论0 收藏0
基于Ajax技术的前后端Json数据交互方式实现

摘要：不过这种方式只能访问静态的页面，无法与后端数据库进行交互。既然用户需要通过前端实时与后端数据库进行交互，那么网页也需要动态的更新，如果每次更新一个数据都通过重新获取文件的方式来实现势必会导致网络负荷加重，页面加载迟缓。前言使用浏览器访问网站是日常生活中必不可少的一件事情，当我们在浏览器地址栏中输入网址后会看到网站的内容，那么这个过程中发生了什么?下面简单介绍下浏览器访问网站过程。 ...

fengxiuping 2019-08-01 18:20 评论0 收藏0