### 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]。
本文介绍了一种使用JavaScript来避免表单重复提交的方法。通过检查特定条件，在发现已存在提交记录时禁用提交按钮并提示用户，确保数据的一致性和有效性。
扫一扫
1114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
