前后端交互

作者: 繁花似锦之流年似水 | 来源:发表于2019-06-16 22:25 被阅读25次

1、前后端交互简单了解

大型网站前后端是分离的,前端代码在一个服务器上,后端代码在另外一个服务器上。我们平常浏览网页的话是先访问前端服务器,获取静态代码,包括html文档结构、css进行文档渲染,还有一些js代码。

那么后台数据是如何获取呢?是通过js向后台发请求,后台返回数据,然后传给前台动态渲染页面。

本文介绍通过jquery中的ajax进行前后端交互。

2、AJAX简单介绍

AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。

其实ajax也很简单,要是学习了js,有的项目中有实现这样的效果触发HTML事件,然后改变CSS样式、甚至添加文字等等。但是ajax特殊的是触发事件后,需要通过JS向后台发送请求获取数据然后再将从后台获取的数据进行处理渲染页面

3、实现方式

通过原生JS:略

通过jQuery中的load方法:

语法:$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

通过jQuery中的ajax方法:

相关文章

  • 前后端交互如何保证安全性?

    前言 web与后端,andorid与后端,ios与后端,像这种类型的交互其实就属于典型的前端与后端进行交互。在与B...

  • 前后端交互完成的新学期最有收获感的一周

      本周,我们的商城项目进入了前后端交互,而且前后端交互也已经完成,ajax和thymeleaf交互模板也已经实现...

  • HTTP协议、存储、Ajax

    前后端数据交互与 HTTP 协议 1、前后端通信是什么(1)前端和后端交互的过程(2)浏览器和服务器之间数据交互的...

  • Vue(3)

    前后端交互 前后端交互模式 Promise用法 接口调用-fetch用法 接口调用-async/await用法 接...

  • 前后端数据交互方法

    《前后端数据交互方法》http://www.zhihu.com/question/26532621一个小案例搞懂前...

  • 2018-02-08

    前端与后端的数据交互 前端与后端的数据交互,最常用的就是GET、POST,比较常用的用法是:提交表单数据到后端,后...

  • SpringBoot学习随笔

    React前端和Spring boot后端的交互整合 前后端接口交互整合,可以通过spring boot的thym...

  • json-server模拟服务端REST接口

    在web项目开发中,前端完成静态页面的开发后,后端迟迟未给到接口,会导致前、后端数据交互的开发流程中停滞。可以根据...

  • 前后端数据交互方法总结

    前后端数据交互方法 在此介绍几种常用的前后端数据交互方法,并给出使用建议。以提高前后端协同开发的效率。 目录: H...

  • #hello,JS:13-01技术方案:Ajax 使用和原理

    前端和后端如何交互,从网站的层面上,如何去呈现?如何和后端去交互?如何向后端获取数据和请求?需要一种方法。 一、页...

网友评论

    本文标题:前后端交互

    本文链接:https://www.haomeiwen.com/subject/kylnfctx.html