day15【前台】项目发布/22-尚硅谷-尚筹网-发起项目-回报信息部分-回报页面上前端代码说明

然后呢，这个我们看一下哈，这个回报的这个页面哈。他点这个按钮，他给我们去展开这些啊，然后这个再点的话呢，把这部分收起来，这个也是需要我们去写这个功能它才能够有的啊。啊。无以为报是吧，你看看过去那篇是吧，这个套路感谢英雄。嗯，挺身而出是吧啊，无以为报是吧啊。啊。然后然后那个这个页面上还写还有啥呢，就是。这个也是上传图片这儿。也做了这么一个操作。呃，但是。但是这个图片呢，注意哈。看一下啊。我如果说在这儿选中一个哈草莓。

他这就发请求了。为啥呢？这这个上传图片是单独去传的。为啥这这个图片得单独去传呢？为啥不等着点确定一块走呢？为啥这图片这个图片得先走呢？就是因为。因为这个点确定这他也不是去提交这个表单，因为你想我们普通的提交一个表单的话。放这。这里边儿呢，有个有个button。大家想啊，我这是一个提交按钮，我要是在页面上一点，它整个页面就一起跟着就都走了。这事大家能能想明白吧？普通的表单吧。点一下提交按钮，这不整个页面不就都走了吗？这是一个整体上的一个，就是整个提交这个事儿，这个一个页面只能做一次。但是我们现在呢，这个页面上不能只做一次，我这儿得添加好多条。

我这边得添加好多条。啊，这边我有好多条要添加，我提交一个以后呢，这页面还不能走，我还得就得留在这个页面，所以这个确定呢，其实是点这个确定的话，是发的一个Ajax请求。那发这个AJ请求的时候呢，我这边上传这个图片吧，我再去拿这个图片，这样上传的这个文件的信息就不好整了。所以说呢，这儿先走一步啊，让这边这个上传这个文件的这个操作呢，是先去提交了一下。啊，所以这个地方这个操作是分开的。对，这个事儿我们在笔记里边说一下哈。说起这个笔记的话呢。我们刚才这个笔记得把那方法拿过来哈。得去这个。接收表单的数据。就是刚才那个操作哈。

嗯，在这里边把那个特别长的那个handle的方法拿过来。这这个这个方法能不能当选我们最长的汉字方法。三个操作哈。呃，然后呢，这边下一个呢，就是说我们这个。代码哈。收集这个回报的信息。啊，这里边儿呢，首先有一个需要去注意的一个地方啊。

上传图片和。提交。表单是分开的。这个页面上呢，有上传图片啊，有这个点确定。诶，就上传图片这一部分。是单独发送一个Ajax请求。去上传这个文件。这个这个发请求上传这个文件的这个代码吧，这个也是现成的哈，这个也是写好了的。然后这边点确定呢，去提交这个表单，这个也是写好了的。这个提交表单呢，也是发送一个AX请求去提交表单。

其实不是提交表单，他只是把这个数据呢，都发送过去啊，发送请求去上传啊，这个全部的数据。呃，所以说这边哈，这两个是分开的啊，得先注意一下这个事儿。我们简单的溜一溜这个页面上这些个这个这个这个代码啊。呃，大家看。咱们主要就是看这个GS啊。这个不用管它啊，这是页面上本来就有。这儿首先呢，有一个东西呢，叫氦的方法，把它给隐藏起来了啊。这个这个东西是谁呢？就是我们页面上的。就是就这一部分啊，你看点了能打开哎，再点能收起来，页面上默认是隐藏的，就刚才这一大块啊，就是一开始先让他先隐藏。

先隐藏了之后呢，这边是。这个东西，哎。就是这个I return button添加回报的这样一个按钮，点它。就给显示出来。再点就收起来这个Togo这个函数呢，就是显示的隐藏，隐藏的显示啊，就是有这么一个效果。然后呢，这个。就是说先声明这么一个全局的这个对象，将来呢，表单的数据呢，都给它存到这里面来啊。然后呢，这个阿布的button。点它的时候点这个按钮。就是点这个上传图片的这个按钮。就打开这个文件选择框。就打开这个啊，就是就是靠我们这部分代码啊。就是这个也是跟前面那个项目那边信息呢是一样的啊，然后这边在。

文件上传框，检测到它的值改变以后就上传这个文件。这个包括这个预览等等啊，这个上传访问这个地址去做这个上传。哎，然后呢。嗯，再然后是啊。它是设置POS请求，Data是form呢，设置为false process是process设置为false啊。这其实我也不太清楚，他这个为什么要这么设置啊，就是这个是就是必须得这么这么做。然后这个是，哎，返回的数据是杰森，也就是说这个请求吧，我们得给他返回一个杰森数据啊。返回result。看是上传成功了还是这个失败了哈。Error的话，A这个呢，咱们可以给他来一个。MD。放点。Status。加上。加上response status text。

然后呢，这个下边这是干嘛的呢。这个这个先说这个OK button哈，点击这个确定的按钮呢，绑定单项函数。这是收集表单的数据。你想这一套咱们要写得多麻烦啊，这个就不写了啊，就是把我们页面上。页面上这么多的表单项啊，这么多的表单项都给它一个一个收集起来。收集起来存到我们前面这个OB币接的里边。然后呢，发请求把这个return OB间呢。哎，把它发送给服务器端。这里边包括一个包括一个什么东西哈，你上传图片如果成功的话，咱们需要把这个图片呢，返回图片的路径，返回回来，放到这个T的data里边，返回回来，哎，然后呢，存到return obg里面，存到这个里边的话呢，在点。在。

嗯，哪个好看看。啊对对，就这已经存了哈，这已经存了，将来再去。下边这再发这些请求，这些数据的时候，把它也会带上一起发给服务器端。啊，所以这个数据是这么传过来的。所以这样吧，这个图应该我们再详细一点画呢，是这样的哈。这边你发请求，服务器端的会给你返回一个返回的响应数据。这个响应数据呢，是一个我们的result。这个entity。啊，它的这个data部分。就是什么呢？就是我们图片的访问的路径。哎，这个就是我们说这个。图片的访问的路径。

那这个路径呢，回来以后呢，得给它设置回来。设置到。这个我们这个return object。这个对象。啊中啊，是叫这个名吧。叫return obj啊return obj。嗯。哎，设置到这个里边。呃，设置到这个里边以后呢。呃，将来你这边发送这个全部数据哈，那么就会就是要把这个。把封装了。全部数据的这个return。

Obj。发送给服务器。哎，所以说这个对象啊，那当然当然这个对象说的是同一个对象啊。那这个里边的数据肯定是发给服务器的啊，所以说这个里边是这么一个效果。把我们刚这个图替换一下吧。哎，这就是我们整个去溜一下这个代码，然后呢，这边这个发送这个数据完事以后哈。还做一个操作是什么哈，就是如果是成功的话啊。我好像有点天真啊。我这边没有倒这个链。我这边没有倒这个链。应该是还没有没有导这个lay的这个环境哈，它这边是就是用alert来做的。

这边这一条保存成功哈。然后呢，这个是。这个部分干嘛呢？使用return OB间的填充表格。就是说你你上传了这个数据之后。这边呢，这个表格下边这你得一行一行的把刚才的那个提交的数据呢。保存进去的数据在这给显示出来，一行一行的都给它显示出来啊，都给它列出来。所以说我们下边呢，就是说去拼一下这个表格啊，那这一部分要写的话也特别的麻烦。拼起来以后放到这里边儿，然后呢，这个head去保存一下。这个order呢？Order是这样的哈，前面这声明了一个order初始化的时候是零啊，你每次点的时候呢，每加一条这个往这个数往上加一个，每每加一条，这往上加一个。啊，是这么一个效果。哎，叫这个button呢，可以清空啊，可以去这个。嗯。叫这个按钮，这个按钮的。

点一下它可以恢复一下这个表单，恢复成默认值。然后这个表单的这部分呢，再把它这个隐藏。哎，所以说这里边儿这个页面上代码吧，要写其实也特别多，也特别麻烦啊，所以我们主要要做的就是跟我们后端能把它接上。