传统的web开发模式想必大家都知道,不管是jsp、asp、php或者一些魔板引擎开发,其实道理都是一样的,都是服务端渲染,原理是:浏览器发送一个get请求,服务器对应的返回前端一个html页面,由浏览器渲染,一张网页就呈现在用户面前了。

但是今天要说的就是大家一直在谈论的话题了,那就是“前后端分离的开发模式”,它的好处自然不必多说,那用我们最熟知jquery能不能做到前后端分离开发呢?答案是可以的!

具体实现也很简单,前端工程师通过ajax访问后台接口(可能会遇到跨域问题,详见上一篇文章)如下:

> $.ajax({
> type:'get',
> url:'/api',
> data:{user:'小明','tel':12345xxxxx}
> success:function(data){
> console.log(data)
> } })

通过一手ajax你可调用任何api,与后台通信不是什么难事。
但是渲染这块就很麻烦了,你可以选择的渲染方式有:append()、html()、text()等,总之很麻烦。

接下来说一说路由问题和页面之间传参问题,我用jQuery做的前后端分离项目一般没有路由,直接就是连接的形势跳转页面,虽然这样很不妥,但是好像也没啥办法。页面传参这哭基本可以解决,你可以通过地址栏传参,另一个页面通过js获取地址栏参数,进而实现地址栏传参这件事。

总之,jquery实现的前后端分离是不完美的,成本也是很高的,新手可以试试,建议学习vue或者angular.js 之类的高级框架。
有说的不对的地方欢迎技术大牛评论指正!以上仅代表我的个人观点。

用jQuery怎么做到前后端分离的更多相关文章

  1. nodeJS(express4.x)+vue(vue-cli)构建前后端分离详细教程(带跨域)

    好想再回到大学宿舍,当时床虽小,房随小,但是心确是满的 ----致  西安工程大学a-114舍友们 转载请注明出处:水车:http://www.cnblogs.com/xuange306/p/6185 ...

  2. [转] 前后端分离开发模式的 mock 平台预研

    引入 mock(模拟): 是在项目测试中,对项目外部或不容易获取的对象/接口,用一个虚拟的对象/接口来模拟,以便测试. 背景 前后端分离 前后端仅仅通过异步接口(AJAX/JSONP)来编程 前后端都 ...

  3. 前后端分离之前端项目构建(grunt+require+angular)

    前言 前段时间做了一个项目,前端开发页面,然后把代码给到后端同学,后端同学通过vm再来渲染页面.后来才发现,这种方式简直是太low了,因为前端代码在服务端同学那里,每次前端需要更改的时候都需要去到服务 ...

  4. 架构设计:前后端分离之Web前端架构设计

    在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分离的一种具体实现方案,该方案和我原来设想有 ...

  5. 利用grunt-contrib-connect和grunt-connect-proxy搭建前后端分离的开发环境

    前后端分离这个词一点都不新鲜,完全的前后端分离在岗位协作方面,前端不写任何后台,后台不写任何页面,双方通过接口传递数据完成软件的各个功能实现.此种情况下,前后端的项目都独立开发和独立部署,在开发期间有 ...

  6. 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi

    一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...

  7. AngularJS中在前后端分离模式下实现权限控制 - 基于RBAC

    一:RBAC 百科解释: 基于角色的访问控制(Role-Based Access Control)作为传统访问控制(自主访问,强制访问)的有前景的代替受到广泛的关注.在RBAC中,权限与角色相关联,用 ...

  8. EF+jQueryUI前后端分离设计

    开源项目练习EF+jQueryUI前后端分离设计   最近大家流行把项目开源,我也来玩玩.只是开源公司项目不好,小弟只好从公司项目经验上另外弄出一套练习开源给大家. 这个项目可以做简单的团队任务系统( ...

  9. js页码生成库,一个适合前后端分离的页码生成器

    原文:js页码生成库,一个适合前后端分离的页码生成器 前言 上星期写的任务里面有需要进行分页的处理,git搜索了一番,没有觉得合适的,于是自己临时写了个分页的算法. 然后等闲下来的时候,决定把分页进行 ...

随机推荐

  1. 论文翻译——Attention Is All You Need

    Attention Is All You Need Abstract The dominant sequence transduction models are based on complex re ...

  2. linux特殊权限(acl)

    建立用户目录       创建目录/oldboy/tech./oldboy/edu,分别用于不同项目组添加组账号       添加组账号tech.edu,GID分别设置为1001.1002      ...

  3. 算法之匹配:KMP

    public static int getIndexOf(String str1, String str2) { if (str1 == null || str2 == null || str1.le ...

  4. YII框架开发一个项目的通用目录结构:

    testdrive/    index.    assets/    css/    images/    themes/           yiic.       commands/        ...

  5. bug_ warning: control reaches end of non-void function

    摘要 在leetcode上编译时,它显示我编译错误 warning: control reaches end of non-void function 它的意思是:控制到达非void函数的结尾.就是说 ...

  6. scala编程(四)——类和对象

     类,字段和方法 在scala里定义一个典型的类,代码如下: class ChecksumAccumulator { private var sum = 0 def add(b: Byte): Uni ...

  7. ospf实验

    以上是实验要求和实验拓扑 R1到R5的ip自己配置了 1. #int loopback 0 #IP add 1.1.1.1 24 2.基本命令R5例: #ospf 1 router-id 5.5.5. ...

  8. HihoCode-1053-居民迁移

    解法: 一开始不会做,看到标签说是贪心加二分忽然就会了,二分是分的是人口最多居住点的人口,检查人口最多的居住点人口为mid是否可行.贪心是如果从左往右循环就尽量把人口往左迁移,如果从右往左循环就尽量把 ...

  9. 如何单独卸载office2016中的one note

  10. OpenCV 改变图像的对比度和亮度

    #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp> #include <ios ...