ajax请求, 前后端, 代码示例

【博客园cnblogs笔者m-yb原创，转载请加本文博客链接，笔者github: https://github.com/mayangbo666，公众号aandb7，QQ群927113708】

https://www.cnblogs.com/m-yb/p/9965238.html

ajax是一种前端异步发送请求数据到后端,进行数据交互的手段,前端页面使用ajax需要依赖jQuery的js库.

比如前端页面提交form表单的数据的ajax请求代码片段示例:

点击登录按钮,触发onlick函数 login()

<script>    function login() {        $.ajax({            type: "POST",            dataType: "json",            url: "/login",            data: {                loginCode: $("#loginCode").val(),                password: $("#password").val()            },            success: function (dataResult) {                if (!dataResult.success){                    alert(dataResult.message);                    return false;                }                alert("登录成功");                window.location.href = "/toMainPage";            },            error: function (XMLHttpResponse) {

            }        });    }</script>

后端的AjaxVO代码:

public class AjaxVO {
    private boolean success;private String message;private Object data;private AjaxVO(){}private AjaxVO(boolean success, String message, Object data){this.success = success;this.message = message;this.data = data;}public static AjaxVO success(){return new AjaxVO(true, null, null);}

public static AjaxVO success(){    return new AjaxVO(true, null, null);}

public static AjaxVO success(Object data){    return new AjaxVO(true, null, data);}

public static AjaxVO failed(String message){    return new AjaxVO(false, message, null);}

public boolean isSuccess() {    return success;}

public String getMessage() {    return message;}

public Object getData() {    return data;}

使用时, 如果后端需要返回无数据体的成功状态就调用

AjaxVO.success();

如果后端需要返回有数据体的成功状态就调用

AjaxVO.success(Object data);

返回失败信息:

AjaxVO.failed(String message);【注】:需要解析json的依赖,本文使用了jackson:需要 引入Jackson Core, Jackson Databind,Jackson Annotations三个mavenjar包依赖.

转载于:https://www.cnblogs.com/m-yb/p/9965238.html

ajax请求, 前后端, 代码示例相关推荐

微信小程序之图片、音频、视频上传（附前后端代码示例）
最近搞小程序开发,碰到了图片上传和音视频上传的问题,百度了下,网上示例不多,鄙人不才,就用TP3.2.3自己写了一个小程序上传图片.音视频的示例,刚好也是项目所需.能力有限,不喜勿喷,仅供新手参考. ...
利用Nginx轻松实现Ajax的跨域请求(前后端分离开发调试必备神技)
利用Nginx轻松实现浏览器中Ajax的跨域请求(前后端分离开发调试必备神技) 前言为什么会出现跨域? 造成跨域问题的原因是因为浏览器受到同源策略的限制,也就是说js只能访问和操作自己域下的资源,不 ...
elementui 上传请求头_element-ui上传组件多个文件同时上传请求一次后台接口（前后端代码版）...
记录时间 2020年10月27日 22点38分前言在使用element-ui上传组件上传多个文件时,出现多个文件对应着多个请求,比如你要上传3个文件,那么将请求3个后台接口,这样会无形之中增加了后 ...
一步步完成jsRender + Spring MVC + Nginx前后端分离示例
2019独角兽企业重金招聘Python工程师标准>>> 本篇博文的目标是使用前端页面渲染插件jsRender做前后端分离,后端采用Spring MVC给出REST API,并结合Ng ...
GitHub开源：一键生成前后端代码神器
目录 1.技术架构 2.微服务架构图 3.业务应用本篇博客将为朋友们分享一款神器:JeecgBoot. JeecgBoot 是一款基于代码生成器的低代码开发平台,零代码开发.采用前后端分离架构:Sp ...
无需写代码！可一键生成前后端代码的开源工具
作者 | HelloGitHub-小鱼干来源 | HelloGitHub(ID:GitHub520) JeecgBoot 是一款基于代码生成器的低代码开发平台,零代码开发.JeecgBoot 采用开 ...
一款无需写任何代码即可一键生成前后端代码的开源工具
JeecgBoot 是一款基于代码生成器的低代码开发平台,零代码开发.JeecgBoot 采用开发模式:Online Coding 模式-> 代码生成器模式-> 手工 MERGE 智能开发 ...
GitHub 近两万 Star，无需编码，可一键生成前后端代码，这个开源项目有点强！...
github地址:https://github.com/zhangdaiscott/jeecg-boot 项目介绍: JeecgBoot 是一款基于代码生成器的低代码开发平台!前后端分离架构 Spri ...
GitHub 30.2K Star，无需编码，可一键生成前后端代码，这个开源项目有点强！
前言今天,推荐一个系统项目.第一次使用就有点上头,爱不释手,必须要推荐给大家.上次是谁要的系统项目啊,我帮你找到了. 这是我目前见过最好的系统项目.功能完整,代码结构清晰.值得推荐. 项目介绍最近 ...

ajax请求, 前后端, 代码示例

ajax请求, 前后端, 代码示例相关推荐

最新文章

热门文章