数据交互和表单操作

今天是上班的第42天,对于一个程序媛来说,不管之前你学了多少年的知识,真正的时间,都应该是从上班开始算起的,因为上班才是敲代码的开始,木有实践,一切的理论对于程序媛来说都是扯淡~

好啦!今天学到了很多的东西,必须在这儿记录一下!

当实现和后台的数据交互时,如果后台返回给我们的是一个数组,里面的值就像这样子,然后前台就不能在JS中像常规那样在构建里面中调后台的参数,看下面的详解吧~

常规的时候后台返回的数据是这样的:

然后我们在前台js构建页面的时候是这样子写的:

但是如果后台今天不这样给你反了呢!嘿嘿,他如果这样子给你返成数组:

那你应该在前台怎么接受这些数据呢,不会了吧,嘻嘻,现学现卖,立马分享给大家,其实很简单:

就像这样,就很成功的接收到了后台传过来的数据,将数组的第一个元素数字赋给前台页面的checkbox的value,同时input文本框的ID是type+这个数组的第一个元素,

也就是它的ID为type+checkbox的value值,这样无形之中两个元素就关联了起来,到时候你在要将前台输入的数据返回给后台就变成了一件很easy滴事情啦~

就在我正洋洋得意滴时候呢,后台告诉我,把前台接收到的数据也就是checkbox和input文本框给他拼凑成这样的形式

然后我又开始纠结了,因为一时木有想到,原来创建对象是可以解决的,所以在这里再和大家分享一下创建对象的东东。。。

我的代码是这样子滴

为了方便大家测试,还是提供一份可以复制滴版本吧!

var checkedObj = $(‘input:checkbox[name="resou_check"]:checked‘);
  var data = {};

  for(var i= 0; i < checkedObj.length; i++) {
  var check = checkedObj[i].value;
  var text = $(‘#type‘+ checkedObj[i].value).val();
  data[check] = text;

  }

这样写想要达到的目的是返回给后台的数据就会是这样子的,正好是后台所需要的。

为了更加方便大家理解,我将上面的代码加上了清晰的注释:

这样子看起来就清楚多了!!!

接下来要做的事情就是要将获取到的对象返回给后台,叫一个json的参数里面。后台这次要的这些数据是一个json.

最初我是这样子做的:::

看来看去觉得哪儿有问题,就是不知道哪儿有问题,想了想豁然开朗!

后台要我返回给他的,是一个json,而我偏偏给他返回了一个对象,这是多么痛的领悟啊~

立马解决,分分钟不拖!!

只需要在传给后台数据之前加上一个小小的句子就好!

这样就将data对象转换成json了~哈哈!!!

-----------------------------------------------------------------------------------这是华丽的分割线---------------------------------------------------------------------------------------------------------------

今天用到了用ajax提交表单数据给后台,就是当点击submit按钮的时候,执行我的submit方法,将页面中的表单数据传给后台放在数据库中去。

这个操作没有什么特别的,就是后台会给一个接口,然后和其他的方法一样,创建ajax请求,数据返给后台变好。

客服那边有个要求就是当点击了提交之后,页面中表单里面所填过的内容被清空了,本来一开始我的第一想法是reset().但是写进去貌似达不到想要的效果,然后我灵机一动,以为想出了一个好法子!

发现它并不能达到预期的效果,表单中的东西压根就不甩我!

反复思考之后发现,发现原本这个语句是获得了页面DOM树中的一个节点,

然后我活生生的非要把这个节点赋给一个变量,然后还傻不拉唧的把这个变量的值给清空了,明明清空节点的值就达到效果的事儿么~!!!

于是乎,我再次醒了过来,挥笔如有神滴敲下了如下的代码,瞬间页面表单药到病除!!!完全康复啦!!!哈哈~

通过checkbox和input文本框的类名找到它们,然后将里面的内容清空!!!!

数据交互和表单操作

时间: 2024-10-11 04:59:34

数据交互和表单操作的相关文章

Django之form表单操作

小白必会三板斧 from django.shortcuts import render,HttpResponse,redirect HttpRespone:返回字符串 render:返回html页面 redirect:重定向 静态文件配置 静态文件:网站所用到的,自己写好js,自己写好css,第三方的框架bootstrap fontwesome sweetalert 通常情况下网站所用到的静态文件资源统一都放在static文件下 STATIC_URL='/static' 是访问静态资源的接口前缀

Hibernate表单操作

1.单一主键 assigned(由java程序生成标识符) native(由数据库自动生成标识符,例如MySQL就是increment.Oracle就是sequence) 2.基本类型 hibernate映射类型 java类型 sql类型 大小 integer/int  java.lang.Integer/int INTEGER  4 btye long  java.lang.Long BIGENT 8 short java.lang.Short  SMALLINT 2 float java.l

jqm文件上传,上传图片,jqm的表单操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo

最近在论坛中看到,在使用html5中上传图片或文件,出现各种问题.这一方面,我也一直没有做过,今天就抽出了一点时间来学习一下.现在的示例已经ok了,我就给大家分享一下,希望对大家有帮助. 好吧,我们先看看效果截图吧: 还行吧,来看页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <h

angular 表单操作

一直没有使用angular的表单验证以及表单提交数据.只是用的input绑定值,另外最近的设计都是点击后显示错误,而不是自动显示错误.所以错误显示一直也没有做.而表单的非法验证可以直接解决这个问题.angular 5最近更新的跟表单验证有关.导致我想研究下angular的表单操作.把web移动端的表单验证添加上.而我的随笔基本都写我不熟悉,我熟悉的,感觉舒适的都不会写. 通过keyup事件,获取用户输入.所有标准DOM事件对象都有一个target属性,引用触发该事件的元素.event.targe

【JavaScript】DOM之表单操作

DOM 表单操作 1.获取表单 获取表单元素 以Document对象中forms属性来获取当前HTML页面所有表单集合以Document对象中表单的name属性值来获取表单元元素 <body> <form action="#"> <input type="submit"> </form> <form name="mylove" action="#"> <inpu

表单操作

# 表单操作     1. ## 表单的引用:</br>             1)直接定位: id / name/ tagname             2)集合方式:                         document.forms[index];通过下标                        document.forms["表单name名"];                        document.forms."表单name

JavaScript-4.1-简单的表单操作,函数使用方法---ShinePans

<html> <head> <meta http-equiv="content-type" content="text/html;charset=GB2312"/> <title> 4.1 确认表单必填项目完整性 </title> <!--脚本部分--> <script type="text/javascript"> function check_submit()

如何把整张表格的数据通过form表单的方式传回后台

开发背景: 前段时间遇到这么一个需求,就是把一整张表格的数据存储在数据库中,之后再渲染在页面中,还可以进行重新编辑. 例如下边的课程表(为了方便,所以都是软件工程). 我也是经过一段时间的思考,才实现了整个功能. 思考过程: 思考过程中,想过用ajax,感觉还是太麻烦了,放弃. 第二个,是找网上现成的接口,比如表单大师之类的...但是找来找去找不到,没有符合要求的接口.放弃. 第三个,想到python万能的包来实现,还是相信python的包是万能的23333,百度来百度去,找不到.放弃. 最后还

前端 http协议 四大特性 web本质 -响应状态码 列表标签 表单操作 form表单 # 44

1.前端简介 1 """""" 2 """前端:""" 3 """和python没有任何关系""" 4 5 1.什么是前端? 6 任何与用户直接打交道的操作界面都可以称之为前端 7 比如 : 电脑界面 手机界面 平板界面 8 9 2.什么是后端? 10 暂时先理解成,幕后操作者 11 不直接与用户打交道 12 13 3.为什么要