简单的前后端交互流程(AJAX)

简介: 今天呢,我想要说的主题是:工作中的前后端交互。
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:这是我的接口。我要怎么做我的页面啊。逻辑怎么写。


bVEJEv.webp.jpg


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的操作啦渲染啦有关。


   

   

相关文章
|
5月前
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
78 0
|
5月前
|
前端开发 JavaScript API
Ajax技术的秘密揭秘:异步传输,高效交互
Ajax技术的秘密揭秘:异步传输,高效交互
|
15天前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
52 2
|
4天前
|
前端开发 API 开发者
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
从零到精通,AJAX与Fetch API让你的Python Web前后端交互无所不能!
14 3
|
2月前
|
XML 存储 前端开发
后端程序员的前后端交互核心-Ajax
后端程序员的前后端交互核心-Ajax
49 6
后端程序员的前后端交互核心-Ajax
|
5月前
|
XML 前端开发 JavaScript
使用 AJAX 提升网页数据的动态交互
使用 AJAX 提升网页数据的动态交互
|
2月前
|
前端开发 JavaScript Java
Ajax进行异步交互:提升Java Web应用的用户体验
Ajax 技术允许在不重载整个页面的情况下与服务器异步交换数据,通过局部更新页面内容,极大提升了 Java Web 应用的响应速度和用户体验。本文介绍 Ajax 的基本原理及其实现方式,包括使用 XMLHttpRequest 对象发送请求、处理响应数据,并在 Java Web 应用中集成 Ajax。此外,还探讨了 Ajax 如何通过减少页面刷新、实时数据更新等功能改善用户体验。
54 3
|
2月前
|
XML JSON 前端开发
JSON与AJAX:网页交互的利器
JSON与AJAX:网页交互的利器
29 0
|
3月前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
【7月更文挑战第15天】Python后端(Django/Flask)与前端通过AJAX或Fetch API实现异步交互,提升Web应用体验。Python提供强大的后端支持,AJAX用于不刷新页面的数据交换,Fetch API作为现代标准,基于Promise简化HTTP请求。结合两者,构建高效、流畅的交互系统,优化响应速度和用户体验,开启Web开发新篇章。
68 5
|
3月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
【7月更文挑战第13天】在Web开发中,AJAX和Fetch API是实现页面无刷新数据交换的关键。在Flask博客系统中,通过创建获取评论的GET路由,我们可以展示使用AJAX和Fetch API的前端实现。AJAX通过XMLHttpRequest发送请求,处理响应并在成功时更新DOM。Fetch API则使用Promise简化异步操作,代码更现代。这两个工具都能实现不刷新页面查看评论,Fetch API的语法更简洁,错误处理更直观。掌握这些技巧能提升Python Web项目的用户体验和开发效率。
54 7