前后台参数传递（&,%处理）

### JavaScript 前后台数据传递教程 #### 使用AJAX实现前后端交互 为了实现实时的数据交换而不刷新页面，可以采用异步JavaScript和XML (AJAX) 技术。通过`fetch` API 或 `XMLHttpRequest` 对象来发送HTTP请求并处理服务器响应。 ```javascript // 发送POST请求到服务器 async function postData(url = '', data = {}) { const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); return response.json(); } ``` 此代码片段展示了如何构建一个简单的函数用于向指定URL发送JSON格式的数据[^1]。 #### 处理表单提交事件 当用户填写完故事条目并通过点击按钮触发提交动作时，可以通过监听DOM上的事件来进行相应的操作： ```html <div class="submission_input"> <textarea name="submission-body" id="submission-body-input" rows="5"></textarea> <button id="submission-body-btn">Submit</button> </div> <script type="text/javascript"> document.getElementById('submission-body-btn').addEventListener('click', () => { let storyEntry = document.getElementById('submission-body-input').value; // 调用之前定义好的postData方法并将输入框中的内容作为参数传入 postData('/api/stories', { entry: storyEntry }) .then((data) => console.log(data)) // 打印返回的结果 .catch(error => console.error('Error:', error)); }); </script> ``` 上述脚本实现了对特定ID元素绑定点击事件处理器的功能，在按下按钮之后读取文本区域的内容，并将其封装成对象形式发送给后端API接口。 #### 后端接收与处理 对于接收到的前端发来的请求，服务端需要设置路由规则以及解析逻辑以完成实际业务需求。这里假设使用Node.js环境下的Express框架为例说明： ```javascript const express = require('express'); const app = express(); app.use(express.json()); // 解析应用/json类型的请求体 app.post('/api/stories', (req, res) => { try{ const newStory = req.body.entry; // 存储newStory至数据库或其他持久化层... res.status(201).send({ message: 'New Story Created!', content:newStory }); } catch(err){ res.status(400).send({error:"Failed to create story"}); } }); app.listen(3000, ()=>console.log(`Server running at http://localhost:3000/`)) ``` 这段程序配置了一个能够接受来自客户端POST请求的新RESTful Web Service，并且针对该路径指定了具体的回调函数负责处理传入的信息[^2]。