java script获取input输入框中的值

通过java script获取input输入框中的值, 他们是需要一个唯一标识或者一个不唯一的但是批量的一个这种标识,来进行获取input输入框中的value

先准备一段 HTML

<input type="text" id="CN_NAME" name="CN_NAME" class="CN_NAME">

一、jquery获取input文本框中的值

通过 name


var name = $('input[name="CN_NAME"]').val();

通过 id

var name = $('#CN_NAME').val();

通过 class

var name = $('.CN_NAME').val();

二、javascript获取input输入框中的值

通过 name

document.getElementsByName("CN_NAME")[0].value

通过 id


var name = document.getElementById("CN_NAME").value

通过 class

document.getElementsByClassName("CN_NAME")[0].value
如果你想要使用input获取后台model封装的对象的,需要先将后台的数据传递到前端页面。具体的实现方式可能会因为你使用的后端框架和前端框架而有所不同,以下是一些常见的实现方式: 1. 通过后端框架的模板引擎将后台数据渲染到前端页面,然后在input使用模板引擎的语法将数据绑定到input。例如,在使用Java的Spring框架时,可以使用Thymeleaf模板引擎来实现: ```html <form action="/submit" method="post" th:object="${user}"> <input type="text" th:field="*{username}"> <input type="password" th:field="*{password}"> <button type="submit">提交</button> </form> ``` 以上代码,我们使用Thymeleaf模板引擎将后台的user对象渲染到前端页面,并通过`th:field`指令将user对象的属性与input框进行绑定。 2. 通过后端框架的接口将后台数据以json格式传递到前端页面,然后在JavaScript将json数据解析成对象,并将对象的属性绑定到input。例如,在使用Python的Django框架时,可以使用Django的内置视图函数`JsonResponse`将后台的数据以json格式返回到前端页面: ```python # views.py from django.http import JsonResponse def user(request): user = {'username': 'admin', 'password': '123456'} return JsonResponse(user) ``` ```html <!-- index.html --> <form onsubmit="return false;"> <input type="text" id="username"> <input type="password" id="password"> <button onclick="submitForm()">提交</button> </form> <script> fetch('/user') .then(response => response.json()) .then(user => { document.getElementById("username").value = user.username; document.getElementById("password").value = user.password; }); function submitForm() { // 获取输入框 var username = document.getElementById("username").value; var password = document.getElementById("password").value; // 在这里可以将用户名和密码发送到后端服务器 } </script> ``` 以上代码,我们使用Django的`JsonResponse`函数将后台的user对象以json格式返回到前端页面。在JavaScript,我们使用`fetch`函数发送请求,并在回调函数将json数据解析成user对象,并将user对象的属性绑定到input。在`submitForm`方法,我们可以将input发送到后端服务器。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

天予不洗头

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值