前后端数据交互demo

### 前后端数据交互示例 #### 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]。