如何把页面的数据传到后台

  今天在网上看资料,看到一些人在问怎么把页面中的数据传到后台,我曾接触过这方面的一些东西,所以,就简单的写一点点了,班门弄斧,献丑了。

  页面的控件一般用到的是textbox和select两种,我就简要的谈一下这两种。

1。textbox传值

 在JSP里面,可以这样写,<netui:textBox tagId="name" style="width:98%" maxlength="66" dataSource="{actionForm.name}"></netui:textBox> ,对于其中的格式属性,我就不多说了,我只说一下dataSource属性。这个dagaSource属性就是和actionForm里面的一个变量的绑定,通过这个绑定,可以把页面的数据传到actionForm里面。

  在根据JSP页面的action设置,我们可以找到jpf里面的action,然后找到对应的actionForm,可以在actionForm里面写:

... ... ... ...

... ... ... ...

String name;

... ... ... ...

Public void setName(String name){

this.name=name;

}

public String getName(){

return this.name;

}

... ... ...

这样,就可以对页面传回来的数据进行操作,由于一般都是用dto进行传值,所以,你也可以在form里面写一个方法,把值传到dto里面,例如:

public void Dto setFormtoDto(){

... ... ... ...

if(this.name!=null && this.name.length>0)

dto.setName(this.name);

... ... ... ...

return dto;

}

在JPf里面,在所有的值通过form.setName(this.name)等等这些语句传进去后,调用setFormDto方法,

dto person=null;

person=form.setFormtoDto();

这样,值就可以传递到后台了。

2。select

对于select,在JSP页面可以这样写:

 <netui:select tagId="sex" style="width:165px" dataSource="{actionForm.sex}" optionsDataSource="{pageFlow.sexList}">

性别的下拉菜单,dataSource的属性和上面说的是一样的,这里多了一个optionsDataSource属性的设定,这个值就是在JPf里面通过调用一些方法从数据库里面查出的值,然后就可以在下拉菜单中看到对应的选项,而且把选择的内容赋给dataSource属性绑定的变量,其他的原理和上面的是一样的。

  以上就是我的一个简单的总结,不知道是否完全正确,还希望高手们给予指点,谢谢。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在前端页面展示后台传来的数据,可以使用前端框架(如React、Vue、Angular等)或纯HTML/CSS/JavaScript。 以下是一些基本的示例: 1. 使用React: ```jsx import React, { useState, useEffect } from "react"; import axios from "axios"; function App() { const [data, setData] = useState([]); useEffect(() => { axios.get("/api/data").then((response) => { setData(response.data); }); }, []); return ( <div> <h1>Data from Backend</h1> <ul> {data.map((item) => ( <li key={item.id}>{item.name}</li> ))} </ul> </div> ); } export default App; ``` 这个示例使用React来展示从后台API `/api/data` 中获取的数据。`useEffect`钩子在组件加载时触发请求,并使用`useState`来更新组件状态以反映从后台获取的数据。在`return`中,将数据映射到列表项中。 2. 使用jQuery: ```html <!DOCTYPE html> <html> <head> <title>Data from Backend</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <h1>Data from Backend</h1> <ul id="data-list"></ul> <script> $(document).ready(function() { $.get("/api/data", function(response) { $.each(response, function(index, item) { $("#data-list").append("<li>" + item.name + "</li>"); }); }); }); </script> </body> </html> ``` 这个示例使用jQuery来展示从后台API `/api/data` 中获取的数据。在`$(document).ready`中,使用`$.get`方法来获取数据,并使用`$.each`方法将数据映射到列表项中。 无论您使用哪种方法,都需要确保从后台获取正确的数据,并使用适当的方式将其展示在前端页面上。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值