JS获取input框用户输入信息作为数组存储传输给后台数据库操作存储方法

最新推荐文章于 2024-01-23 17:47:28 发布

原创

最新推荐文章于 2024-01-23 17:47:28 发布 · 5.3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#JS

本文介绍如何使用JS获取input框中用户输入的信息，将其转化为数组并存储，随后通过AJAX POST请求将数据传输到后台数据库进行存储。

JS获取input框用户输入信息作为数组存储传输给后台数据库操作存储方法

获取input框用户输入信息数组存储

 var datas = {

            Id: idData.id,
            OrderDetailCode: $('input[name="Edit_s_OrderDetailCode"]').val(),
            DeviceCode: $('input[name="Edit_s_DeviceCode"]').val(),
            FactoryArea: $('input[name="Edit_s_FactoryArea"]').val(),
            MachiningLineBody: $('input[name="Edit_s_MachiningLineBody"]').val(),
            Series: $('input[name="Edit_s_Series"]').val(),
            Size: $('input[name="Edit_s_Size"]').val(),
            DateTime: $('input[name="Edit_d_DateTime"]').val(),
            Type: $('select[name="Edit_Type"]').val(),
            Specifications: $('input[name="Edit_s_Specifications"]').val(),
            workOrder: $('input[name="Edit_s_workOrder"]').val(),
            uutType: $('input[name="Edit_n_uutType"]').val(),
            uutName: $('input[name="Edit_s_uutName"]').val(),
            uutCode: $('input

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

懒祭鱼

关注关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

使用 JavaScript 将数据存储在数据库中

hongfu951的专栏

08-11

1042

在开发我的任务列表应用程序时，我实现的一个非常酷的功能是能够将数据存储在数据库中。使用 JavaScript，我创建了一个将用户数据发送到服务器的函数。这不仅确保了数据被安全地保存，还为用户提供了流畅且愉快的体验。

html输入数组调取,JS获取input框用户输入信息作为数组存储传输给后台数据库操作存储方法...

weixin_32515143的博客

06-08

1124

JS获取input框用户输入信息作为数组存储传输给后台数据库操作存储方法获取input框用户输入信息数组存储var datas = {Id: idData.id,OrderDetailCode: $('input[name="Edit_s_OrderDetailCode"]').val(),DeviceCode: $('input[name="Edit_s_DeviceCode"]').val()...

参与评论您还未登录，请先登录后发表或查看评论

获取用户输入到input的内容并传给后台拿数据

瑰的博客

06-21

2万+

实现效果图 <html> <head> <script language="javascript"> function print(){ var a=document.getElementById("test").value; alert(a); } </script>...

[BYSX] SSM框架实现页面输入到数据库的全过程

r2tan

07-22

1336

[BYSX] SSM框架实现页面输入到数据库的全过程在上次的项目中，我们已经实现了登录功能，这一次，我将以实现登录之后向数据库中添加用户的功能为例，展示从输入到数据存储到数据库的全过程。界面设计 数据库中用户数据包括id，username，password。id是自动添加的，我们只需要输入用户名称和密码，然后保存。界面的设计代码存储在jsp文件中，保存的响应会在**/user/add.do**中处理。 <form action="${pageContext.reques

用JQuery的方式把name相同的元素按照数组方式提交到后台

keke_Xin的专栏

10-12

918

如果直接放到form里面，名字相同的多个元素只需要在后台用request.getParameterValues（name)就可以了，JQuery用如下方式处理：注意：后端貌似真得用request.getParameterValues（name[])的方式才能取到值，通过浏览器的network也可以看到http请求信息里面传的参数名就是name[]这种格式的解决方法：客户端： ...

php传输相同name的参数,form表单多个相同name向后台传值(数组)

weixin_42523907的博客

04-08

759

项目中有个需求:form中有一个input输入框 ,用户可以随意添加输入框的数量,点击提交时所有输入框都要提交到后台,最开始我是将所有输入框给一个相同的name属性,但是后台取到的这个name的值是最后一个输入框的数据,其他输入框的数据被覆盖了,,,探索一阵子找到了解决方法:在name的value后面加上[]就可以了.前端代码:php代码:if (isset($_POST["usern...

ASP.NET文件上传并将数据存储到数据库的实现方法

“数据库存储”意味着需要使用SQL Server、MySQL或其他关系型数据库中的`VARBINARY(MAX)`、`IMAGE`（已弃用）或`BLOB`类型字段来保存文件的原始字节流；“ASP.NET”作为技术栈，提供了完整的Web开发模型，包括Web ...

2.11用AJAX获取数据（通用做法）承保子系统的投保单录入页面的“条款信息”TAB页的保单条款部分的条款内容是用AJAX实现了从后台异步获取数据。本节以“查看条款内容”为例讲述在系统用AJAX从后台异步获取数据的通用做法。 2.11.1“查看条款内容”的操作情景操作情景是：用户输入条款编码后点击条款内容按钮，此时由页面向后台发送一个查询请求，根据用户输入的条款编码查询出条款内容，并显示在条款内容的<span>区域内。在从页面发送请求到从后台返回查询结果的过程中，页面右上角将显示红色背景的LOADING信息用于提示用户此时前台和后台正在交互。由于查看条款内容这个操作页面不能提交表单、不能有刷新、并且所有的条款内容又不能事先都查出来，那样效率太低，只能是选择一个条款后再查询它的内容，所以在这些提前下用AJAX技术实现前台和后台的交互是比较合理的。 2.11.2前台JS函数调用后台JAVA类简单的讲，我们的系统是通过前台JS函数与后台JAVA类之间实现交互的。下面讲解查看条款内容这个例子的实现方法。首先打开\webapps\prpall\common\clauses\EditClauses.jsp文件，这就是条款信息TAB页的JSP文件。在“条款内容”按钮的onclick事件调用了openPolicyClausesContext()函数，见下图：我们在调用这个函数时传入了this，表示把当前这个按钮对象作为入参传入方法中。我们来看一下openPolicyClausesContext()函数，这个函数就在这个JSP页面的下方：在多行输入域模式下，每行的同一列的元素都是同名的，所以我们首先要知道我点击的是哪行的按钮，之后也就可以得到这行的条款代码，并且还要把查询出的条款内容写在这行的条款内容<span>中。函数首先通过调用getElementOrder()函数得到某个页面对象在整个页面的同名对象中是第几个。我们把按钮对象作为入参传入getElementOrder()方法，函数返回的是“单击的是第几个条款内容按钮”，同时也就知道了当前操作的是第几行。有一点要说明，getElementOrder()方法的返回值是从1开始编排的，而数组的下标是从0开始的，所以得到返回值后还要“减1”。我们通过order变量，可以得到这行的条款代码，我们的条款代码输入域的name是GuClausesClauseCode，我们把“fm.GuClausesClauseCode[]”和order变量作为入参传进getElementObjectByOrder()方法可以得到这行的条款代码输入域对象。fm是当前这个表单的名字，“fm.GuClausesClauseCode[]”这个拼写格式是固定的，正如图中所示。我们得到inputObject对象后，通过调用inputObject.value可以得到这行输入的条款代码。按照同样的方法，我们可以得到<span>中存放条款内容的<TEXTAREA>对象。接下来我们要判断如果用户输入了条款代码并且此时条款内容<TEXTAREA>中还没有数据，那么我们就调用dwrInvokeData函数实现前台JS与后台JAVA之间的交互。dwrInvokeData()、getElementObjectByOrder()、getElementOrder()函数都是系统提供的公共的JS函数，已经在\webapps\common\StaticJavascript.jsp文件中引入了，所以我们在函数中直接调用即可。 dwrInvokeData()函数接受5个入参：“"openPolicyClausesContext"”—将要调用的后台JAVA类的方法名；clauseCode—这个方法的入参，我们要求这些后台的JAVA方法的入参只能有一个，但不必须是字符串，也可以是一个数组，常用的JS变量就是单值的变量或者是数组，这个入参也可以是我们自定义的JS对象，但这个对象必须与后台某个DTO对象对应；“"openPolicyClausesContextCallback"”—是当dwrInvokeData()函数运行后回调的页面上的JS函数，这个JS函数是要我们自己写的；inputObject—是传入参数的输入域对象，实际上我们可以在这里传入任何一个输入域对象，或者是一组对象的数组；outputObject—用于显示后台查询结果的输入域对象，可以是一个单一的对象也可以是一组对象的数组。通过上面的讲述可以看出，我们对第二、四、五个参数几乎没有限制，它们都有很大的利用空间。调用dwrInvokeData()函数之后，请求就被发送到后台，下面讲述后台JAVA类的编写方法。对于用AJAX从后台获取数据的方法，我们都写在平台子系统的DwrInvokeDataAction类中，它在com.chinainsurance.application.platform.web.action包下。它用于接收从前台JS函数发来的请求，在这个例子中我们传给dwrInvokeData()函数的第一个参数是openPolicyClausesContext，表明在后台的DwrInvokeDataAction类中要有一个同名方法与之对应。如下图所示：上面这个例子中函数的入参是String类型，这是因为我们在前台JS中定义的入参是“var clauseCode = “”;”并且我们也已经知道clauseCode这个参数肯定是一个字符串，所以我们在后台JAVA方法的入参也对应的指定为String类型。如果我们可以明确的知道这个前台的JS参数肯定是一个数字，那我们在后台的JAVA方法的入参可以直接定义为Integer、Double或Long类型的，系统会自动把参数从JS变量转换为JAVA对象传进方法。由于在JS语法中所有数据类型的变量都可以用“var”来定义，所以在这里我们必须要确保在JS中指定的入参（例子中是var clauseCode）的数据内容一定能转换为JAVA方法的入参（例子中是String clauseCode），否则JS函数会弹出“[Object Error]”错误。如果我们在前台JS中定义的参数是一个数组，像下面这样：为了演示功能，我们特意定义了一个inputArgs数组并且把clauseCode作为它的第一个元素。我们再来看一下这样定义JS参数之后，对应的后台类该怎样写：对于JS数组inputArgs我们已经知道它存放的元素都是字符串，所以在后台类的方法中我们可以明确定义入参就是String[]类型，系统会自动把JS数组转换为JAVA对象字符串数组。同理，如果我们能事先明确JS数组存放的都是数字，那我们也可以把JAVA方法的入参类型指定为Integer[]、Double[]或Long[]。以上我们的入参都是JDK标准的对象类型，除此之外我们也可以使用自定义的对象。我们再来修改一下JS函数，像下面这样：我们在第一个红框内自定义了JS对象类型GgClauseTextDto并且定义了两个属性clauseCode和lineNo；在第二个红框内我们创建了这个对象类型的一个实例并且把clauseCode值赋给了这个对象的clauseCode属性；在第三个红框内我们把这个对象作为参数传递到后台。下面接着看后台的JAVA类：后台JAVA方法入参我们指定的是一个DTO，由于我们自定义的JS对象的属性与后台JAVA对象GgClauseTextDto的属性是一致的，所以系统可以自动把JS对象转换为JAVA对象。这里需要说明：1，JS对象不用把后台DTO的所有属性都定义进去，用到哪个属性就定义哪个属性就行了，像我们的例子中只定义了clauseCode和lineNo，实际上我们的lineNo属性没有用到，在这里不定义也是可以的；2，JS对象的属性名必须与后台DTO的属性名一致，否则系统无法自动把JS对象的属性值复制到JAVA对象中。3，JS对象的类型名称不必须要与DTO类名相同，但我们建议定义为一样的，这样方便前后台对应维护。还有一种更简便的写法，就是在JS对象中连属性都不用定义，在用到这个对象时需要哪个属性就直接为这个属性赋值就可以了。像下面这样：我们在第一个红框内已经不定义属性了；在第二个红框内依然跟前面的写法一样，直接调用ggClauseTextDto.clauseCode为其clauseCode属性赋值。我们也可以把GgClauseTextDto对象放到JS数组中传到后台，像下面这样：对应的后台类是：我们把JAVA方法的入参指定为GgClauseTextDto数组，是因为我们已经事先知道JS数组中存放的都是GgClauseTextDto对象。如果我们在JS数组中放入了各种各样的对象，那我们后台的JAVA方法的入参要指定为Object[]，然后在JAVA方法中再使用强制类型转换。从上面的例子可以看出，JS方法入参和JAVA方法入参的对应关系是很灵活的，虽然我们的入参只有一个，但这一个参数有很大的利用空间。在DwrInvokeDataAction的方法中得到入参后，调用Service查询数据的方法跟普通的Action类似，没有什么特别的。下面讲解后台的返回值以及前台的回调函数。 2.11.3后台JAVA类为前台JS函数返回结果回忆一下我们调用dwrInvokeData()函数时的入参：红框内的参数是后台执行完查询后要调用的前台的JS函数，这个函数是要开发人员自己编写的，像下面这样：这个方法的入参是固定的三个：第1个和第2个跟调用dwrInvokeData()方法时传入的inputObject和outputObject一样，我们只是简单的把传给dwrInvokeData()方法的inputObject和outputObject对象又传给了我们自己写的这个回调函数；第3个参数是后台JAVA方法返回给JS函数的数据。我们上面给出的JAVA方法的返回值就是一个String数据存储着条款内容，所以系统会自动把JAVA字符串转换为JS字符串，所以我们就直接把returnObject赋给条款内容输入域就可以了。我们系统可以自动转换的JAVA对象包括：String、Integer、Double、Long，还包括所有的DTO对象。例如如果后台返回的是一个DTO，像下面这样：为了演示功能，我们特意把条款内容查询出来之后放进了一个DTO的context属性。返回到前台后我们看一下回调函数该怎样写：后台JAVA对象返回到JS函数时系统已经把它转换为了JS对象，所以我们在回调函数中直接调用returnObject的属性就可以了，不用再写任何关于类型属性定义或转换的语句。调用returnObject的属性时要注意属性名与后台返回的DTO的属性名是一致的。从后台也可以返回一个存储DTO对象的java.util.List，在前台JS中可以这样获取List中的每个对象：如果从后台返回的对象是java.util.List，在调用前台的JS回调函数时系统已经把java.util.List对象转换为JS数组。我们可以像操作普通的JS数组一样来操作returnObject。如果后台返回的是某个对象的数组，那么前台JS的操作方式与上面一样，只是通常情况下我们从后台都不返回数组对象，要么返回的是单个的DTO对象，要么返回的是List对象，或者返回的是JDK标准的对象类型。 2.11.4dwr的同步执行问题 Application.js文件里的function dwrInvokeData()函数，增加了一个入参async，用于指定这个函数在本次执行时是否是异步的。这个入参是boolean型变量true/false。如果传入true，表示是异步的，如果传入false，表示是同步的；如果不传，默认是true。以前dwrInvokeData函数有6个入参，但我们通常调用它时只传入5个，例如：dwrInvokeData(p1, p2, p3, p4, p5)。现在入参是7个了，调用时一定别忘记把原来第6个入参的位置传入null，否则参数就错位了。例如：dwrInvokeData(p1, p2, p3, p4, p5, null, false)。原先第6个入参是自定义的提示信息，我们现在dwr在工作时页面右上角显示Loading，这个信息是可以通过第6个入参来自定义的。但我们通常不需要这样做。所以第6个入参传入null即可。 2.11.5总结我们用AJAX从后台获取数据时要编写的代码是： 1.编写一个JS调用函数，例如openPolicyClausesContext()函数，用于组织参数并通过它来调用dwrInvokeData()函数； 2.在DwrInvokeDataAction类中写对应的方法，用于查询数据； 3.编写一个JS回调函数，用于把从后台返回的数据按照自己的规则显示到页面上。简单的讲，我们就是通过JS调用JAVA来实现获取数据的。在获取数据的过程中，页面右上角会显示LOADING信息，在这期间不适合做页面校验、不适合提交表单，在这期间请耐心等待，但用AJAX异步获取数据的速度是很快的，并不会等待太长时间。对于JS入参是DTO的和后台返回DTO对象的情况要注意，JS不能读取DTO对象中嵌套的DTO对象的属性。我们的系统只能把DTO对象中的JDK标准数据类型的属性在JS和JAVA之间互相转换。JS中调用的DTO的属性名必须和JAVA的DTO对象的属性名一致。怎么快速理解以上的开发文档知识