textarea 接收后台数据显示

textarea和input在接收后台数据上是不一样的

<div class="form-group">

   <label  class="control-label  col-sm-4" for="">柜员:</label>

   <div>

    <input disabled type="text"  name="qy"  class="form-control" value="${(result.gy)!}"

   </div>

</div>

<div class="form-group">

   <label  class="control-label  col-sm-4" for="">信息:</label>

   <div>

    <textarea  disabled type="text"  style="height:80px"  name="xx"  class="form-control" > ${(result.xx)!} </textarea>

   </div>

</div>

### 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]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值