0

0

ajax后端怎么写?如何实现前后端交互(代码示例)

青灯夜游

青灯夜游

发布时间:2018-10-11 15:33:30

|

26742人浏览过

|

来源于博客园

转载

下面本篇文章就来给大家介绍如何ajax后端怎么写?如何实现前后端交互,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

ajax后端怎么写?如何实现前后端交互(代码示例)

前言

什么是前后端衔接?为什么这么叫,那是因为我实在想不出另一个比较好的叫法来形容我在小白阶段的前端开发时遇到的问题。

1.我们都知道,前端不仅仅是做好网站界面、做好用户交互设计,还要做好与后端的“沟通”。

说是这么说,但是如何做到与后端进行沟通呢,后端对于前端来说到底是一个什么样的东西,虽然总是听到,但我又应该怎样去接触它呢?

2.当我们的CSS技术已经炉火纯青的时候,我们不再仅仅满足于练习式的仿站,而是想真正地做到企业开发,想开发一个属于自己的应用,或者做一个小项目,好在面试的时候有拿得出手的东西。

疑问

那么什么是后端呢?

因为我不是从事后端开发工作的,所以我不想多说什么。

但是,作为前端开发工作者,你至少得会两点,第一是做好Web的交互设计;第二是使用后端返回的数据。

所以,后端对前端简单地来说,就是能处理数据然后将数据返回给前端,供前端使用。

当然,前端的工作还有诸如浏览器兼容、Web性能优化等等这些。

那怎么与后端接触呢?

这时候我们应该换个说法:向后端发送我(前端)的请求。

就我目前所知,向后端发送请求有下列几种方法,当然了,如果你使用了其他前端开发框架,如Vue.js、React等这些,那么还会有其他方法,不过我在这只介绍下传统的方法。

方法

1.使用

标签的action属性可以向后端发送请求,这种方法在特殊的场景下会用到。

使用如下:


    

这种方法在这只做简单地介绍,不是本文的主要阐述。

而且这种方法有比较多的限制,比如不能设置复杂的请求头。

2.使用WebSocket进行通信,这是一种比较新型的方法,大家可以自行搜索,也只是简单地调用API(使用提供的方法)。

MotionGo
MotionGo

AI智能对话式PPT创作,输入内容一键即可完成

下载

3.fetch()方法,这也是一种很新的方法,但目前兼容的浏览器有限,所以也不是很常用。

4.ajax(阿贾克斯),这是一种很常用很方便的方法,关于ajax的介绍可以自行百度。说到ajax,就得分JavaScript的ajax和jQuery的ajax。

1)原生js的ajax是基于一个名为XMLHttpRequest的对象。哦不,应该是有关ajax的都是基于这个对象。大家可以去百度原生ajax的写法,只需要做了解就行,因为真的很少需要写到。

2)jQuery是一种JavaScript的封装库,封装了许多常用简便的方法,使用起来非常简单,我想是每一个前端开发者必会掌握的技能。所以本文主要使用jQuery封装好的ajax。

实例

说了这么多,终于开始进入正题了...

我们要向后端发送请求,那肯定得有后端啊,可是我不会后端,难道我还得去学习后端吗?

所幸,这个世界有一种神奇的东西,叫做开放平台、开放API。比较有名的就是新浪开放API、豆瓣开放API、各大地图类开放平台等等。

这种开放平台就相当于我们的后端,它给我们提供了开放API(url)。开放,我不说你也知道是什么意思了。

下面直接是一段代码:

$.ajax({
    type: 'GET',                                                     // 请求的方式
    url: 'https://free-api.heweather.com/s6/weather/now?parameters', // 请求的地址(和风天气开放API)
    data: {                                                          // 请求所需要填的参数
        location: '中山,广东',                                        // 需要查询的城市或地区
        key: '9da*********************95bcb82f'                      // 用户认证key    },
    success: function(data) {                                        // 请求成功后,接收到data
        console.log(data); // 打印获取到的数据
                
        // 对获取到的数据稍作处理
        var basic = data.HeWeather6[0].basic;        var now = data.HeWeather6[0].now;
        console.log(basic);
        console.log(now);

    }
});

在浏览器上按F12,在Console栏看到的结果:

到这里,前后端衔接的过程就完成啦!

在这里,我是用的开放平台是和风天气(https://www.heweather.com),它提供了一些天气的数据,假如使用它,我们就可以开发一款自己的天气APP啦。

好了,我所做的介绍就到这里了!关于前端的知识真的非常非常多,还需要大家自己主动去学习和掌握!

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程jQuery视频教程AJAX视频教程

相关推荐:

php公益培训视频教程

JavaScript在线手册

AJAX在线手册

jQuery在线手册

相关专题

更多
php文件怎么打开
php文件怎么打开

打开php文件步骤:1、选择文本编辑器;2、在选择的文本编辑器中,创建一个新的文件,并将其保存为.php文件;3、在创建的PHP文件中,编写PHP代码;4、要在本地计算机上运行PHP文件,需要设置一个服务器环境;5、安装服务器环境后,需要将PHP文件放入服务器目录中;6、一旦将PHP文件放入服务器目录中,就可以通过浏览器来运行它。

2525

2023.09.01

php怎么取出数组的前几个元素
php怎么取出数组的前几个元素

取出php数组的前几个元素的方法有使用array_slice()函数、使用array_splice()函数、使用循环遍历、使用array_slice()函数和array_values()函数等。本专题为大家提供php数组相关的文章、下载、课程内容,供大家免费下载体验。

1600

2023.10.11

php反序列化失败怎么办
php反序列化失败怎么办

php反序列化失败的解决办法检查序列化数据。检查类定义、检查错误日志、更新PHP版本和应用安全措施等。本专题为大家提供php反序列化相关的文章、下载、课程内容,供大家免费下载体验。

1493

2023.10.11

php怎么连接mssql数据库
php怎么连接mssql数据库

连接方法:1、通过mssql_系列函数;2、通过sqlsrv_系列函数;3、通过odbc方式连接;4、通过PDO方式;5、通过COM方式连接。想了解php怎么连接mssql数据库的详细内容,可以访问下面的文章。

952

2023.10.23

php连接mssql数据库的方法
php连接mssql数据库的方法

php连接mssql数据库的方法有使用PHP的MSSQL扩展、使用PDO等。想了解更多php连接mssql数据库相关内容,可以阅读本专题下面的文章。

1416

2023.10.23

html怎么上传
html怎么上传

html通过使用HTML表单、JavaScript和PHP上传。更多关于html的问题详细请看本专题下面的文章。php中文网欢迎大家前来学习。

1234

2023.11.03

PHP出现乱码怎么解决
PHP出现乱码怎么解决

PHP出现乱码可以通过修改PHP文件头部的字符编码设置、检查PHP文件的编码格式、检查数据库连接设置和检查HTML页面的字符编码设置来解决。更多关于php乱码的问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

1445

2023.11.09

php文件怎么在手机上打开
php文件怎么在手机上打开

php文件在手机上打开需要在手机上搭建一个能够运行php的服务器环境,并将php文件上传到服务器上。再在手机上的浏览器中输入服务器的IP地址或域名,加上php文件的路径,即可打开php文件并查看其内容。更多关于php相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

1306

2023.11.13

Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

36

2026.01.14

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号