最简单的前后端数据交互

本文介绍了一个使用Python实现的简易Web服务器实例,展示了如何通过Socket编程让服务器接收并响应浏览器请求,实现前后端数据交互。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最简单的前后端数据交互

1 前言

本人断断续续地接触Web前后端已有一年多了,但是一直停留在表面,只知其一,不知其二。这个周末马上就要过去了,但是这两天啥都没做,想到这里,强烈的负罪感冲上心头,于是从床上跳起来,打开电脑就是一顿敲打,我今天唯一的目标就是完成一个最简单的Web服务器实例。通过这个实例我们可以了解:

  • 浏览器在访问服务器时给浏览器发了什么
  • 服务器如何给浏览器发送数据

2 准备

  • Python3(当然,不强制要求,只要能够完成简单的Socket编程即可,原理相同)

3 代码实例

import socket

HOST, PORT = "192.168.0.107", 8888										# 这里IP地址替换成自己的IP地址即可,这样如果使用路由器的话可以通过手机访问,方便调试

listen_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM) 		# 创建服务端套接字
listen_socket.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)  	# 保证服务器的监听socket,即listen_socket在关闭后对应的端口能够立即释放,
																		# 否则将会在数分钟后才能释放
listen_socket.bind((HOST, PORT))  										# 绑定地址和端口,''为空默认为本地'127.0.0.1'
listen_socket.listen(5)

print('Web服务器启动成功...')

while True:
	print('\n\n等待客户端连接===================================================================')
	client_connection, client_address = listen_socket.accept()
	print('客户{}端连接成功'.format(client_address))
	request = client_connection.recv(1024)
	print(request.decode())
	http_response = 'HTTP/1.1 200 OK\r\n\r\n<!DOCTYPE html><html><header><meta charset="utf-8"><title>欢迎光临</title></header><body><h1>欢迎光临!</h1></body></html>'
	client_connection.sendall(http_response.encode())
	client_connection.close()
	print('客户端被关闭=====================================================================')

通过浏览器访问192.168.0.107:8888后服务器的打印信息如下(由于来回切换界面太麻烦,所以我把手机连入局域网,通过手机访问,用着很有感觉~)

等待客户端连接===================================================================
客户('192.168.0.106', 59212)端连接成功
浏览器请求信息:


GET /favicon.ico HTTP/1.1
Host: 192.168.0.107:8888
Connection: keep-alive
User-Agent: Mozilla/5.0 (Linux; Android 5.1; vivo X6Plus D Build/LMY47I; wv) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.84 Mobile Safari/537.36 VivoBrowser/7.4.10.0
Accept: image/webp,image/apng,image/*,*/*;q=0.8
Referer: http://192.168.0.107:8888/
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,en-US;q=0.9


客户端被关闭=====================================================================

浏览器的效果如下:

4 结语

本篇不打算解释浏览器请求的具体内容含义,后面用到的时候会专门讲解,谢谢!

### 前后端数据交互示例 #### Ajax 同域请求示例 以下是一个基于 AJAX 的同域请求示例,展示了如何从前端发送数据到后端并接收响应: ```javascript // 使用原生 XMLHttpRequest 对象发起 GET 请求 function fetchData() { var xhr = new XMLHttpRequest(); xhr.open('GET', '/api/data', true); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log(JSON.parse(xhr.responseText)); // 解析 JSON 数据 } }; xhr.send(); // 发送请求 } ``` 上述代码演示了一个简单的 GET 请求过程[^1]。 如果使用现代框架如 jQuery,则可以简化为如下形式: ```javascript $.ajax({ url: "/api/data", type: "GET", success: function(response) { console.log(response); // 处理返回的数据 }, error: function(error) { console.error("Error:", error); // 错误处理 } }); ``` 此部分说明了前端通过 AJAX 技术与后端进行通信的特点以及具体实现方式。 --- #### Ajax 跨域请求示例 对于跨域场景下的前后端数据交互,可以通过 CORS(跨源资源共享)机制来解决。以下是具体的代码片段: ```javascript fetch('https://example.com/api/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' }) }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); ``` 这段代码利用 `fetch` API 实现了 POST 方法的跨域请求,并传递了 JSON 格式的参数[^3]。 --- #### 后端接收数据示例 假设后端采用 Django 框架作为服务端逻辑支持,下面是一些常见的数据接收方式: ##### 接收 POST 表单数据 ```python from django.http import JsonResponse from .forms import TaskModelForm def handle_post_data(request): if request.method == 'POST': form = TaskModelForm(data=request.POST) if form.is_valid(): # 处理有效表单数据 return JsonResponse({'status': 'success'}) else: return JsonResponse({'status': 'error', 'errors': form.errors}, status=400) ``` 此处展示了如何通过 Django 中的 `TaskModelForm` 来验证解析来自客户端提交的表单数据[^4]。 ##### 接收 GET 参数 ```python def get_uid(request): uid = request.GET.get('uid') if uid is not None: return JsonResponse({'uid': uid, 'message': 'User ID received successfully.'}) else: return JsonResponse({'error': 'UID parameter missing'}, status=400) ``` 该函数用于捕获 URL 查询字符串中的特定键值对,并将其转换成 JSON 格式返回给调用方。 --- #### 总结 以上分别介绍了不同类型的前后端数据交换模式及其对应的编码实践案例。无论是同步还是异步操作,都强调了 JSON 是目前最广泛使用的媒介之一,在促进 Web 应用程序内部组件间高效协作方面发挥了重要作用[^2]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值