day14/上午/281-尚硅谷-尚融宝-动态表单的基本结构和表单自动提交

好，接下来呢，刚才我们提到了这个表单呢，并不是说我们直接要创建出来的，是后期我们要用Java代码去动态的组装出来的，但是真正在组装之前呢，我们先来看一看我们要创建这个表单到底要完成什么，所以呢，我先手工创建一个，然后看一看这个表单能够帮助我们完成什么功能，那既然是手工创建呢，就是临时的哈，我们先临时的创建一个test目录。然后呢，在这个test目录下面呢，咱们先创建一个，嗯，比如说叫放吧，点HTML的一个表单，然后呢，咱们就把这个表单呢给它粘过去，好粘过去之后呢，我先把script这里面的内容呢，先给它屏蔽一下啊好，然后这样的话呢，我是不是就可以预览了。还有预览这个表单F12，然后呢，接下来呢，我怎么去提交它，我怎么去提交它这个表单，我要提交的话，我是不是得有一个按钮提交啊，但是我其实并不想用按钮去提交，我想怎么提交啊，我就想用这段代码提交，用这段代码提交有什么好处，就是它这个表单会自动提交，也就是说我事先把这个表单组装好啊，组装好之后呢，我把表单的名字和这个表单的文本字段的名字和文本字段的值我都给它填充上，当然了是通过Java代码自动的组装出来的，都给它组装好，组装好填充上，并且呢，我也指定我要提交到什么位置，把这个表单，比如说我就想把表单呢，提交到我们刚才的那个啊。

9999端口是什么来着，贵妇宝吧，是吧，贵妇宝的端口。好，我就想提交到这个里面来啊，提交到这个里面来之后呢，那比如说。我这面我就提交到恢复宝的test。这个地址当中去明白吧，当然会把后面我们会有一个固定的其他的地址啊，假设说是这个地址，然后呢我想提交，然后呢我呢想通过自动提交的方式提交，这样的话呢，只要大家看document点点submit，它是不是一个javascript的表单提交的这样的一个脚本啊。

这没有写表单提交，表单提交好，并且呢是自动提交，所以那就意味着只要我一访问。只要我一访问这个页面，那我这个表单当中的这些参数就会自动提交到这个地址当中去啊，然后呢，自动提交怎么完成的呢？就是这么完成的，好，然后接下来呢，我右键我们来看一下啊。大家看是不是瞬间就提过来了，我们再来看一眼啊，就正常情况下呢，我们应该是访问这个表单的，但是只要这个代码一有，他就瞬间提交到会宝。

嗯，表单马上瞬间提交对吧？啊好，我们F12看一下，F12看一下呢，这面。我们再来重新问一下刚才我们的这个。嗯，表单哈。这样这样看啊。嗯，我的表单地址，我先把这个屏蔽一下，因为我要把这个表单地址拿到。好，就是这个地址哈。然后接下来呢，我再把它放，我要干嘛呢？注意啊，我这样测一下，就是先打开。好，然后接下来呢，在这个地方F12啊，然后接下来呢选二哈，然后在这个地方呢，我回车，大家看我其实要监听他的这个提交。好，那我这个表单是不是刚才我通过访问form直接提交到test了，好，Test这面看had had这面是不是就把刚才我表单里面的这两个参数通过请求头就传递给test了，这样的话我test我是不是就可以接收到这些参数了，明白这意思吧，啊，所以这个呢，是我们做了一个像恢付宝提交的这么一个工作，当然了，恢付宝里面呢，其实并没有这个页面，所以呢，它又报错了，那我们这个账号绑定，我们要提交到会付宝当中的哪个页面呢？注意我们要提交到惠付宝当中的这个页面。

啊，要提交到汇保当中的这个页面，这样的话呢，如果你想提交到汇保当中这个页面的话，那在这个位置我们呢，就把页面改成他这个就是我们账号绑定要提交的数据，然后呢，我们账号绑定要提交的这个地址在这儿，我们账号绑定要提交的参数在这儿啊所以接下来呢，我们就可以根据这个呢再做一个提交，所以我们再来看一下。所以呢，这面呢，就是刚才我的。

嗯。放哈，看一下这个这个地址是吧，是我要啊组织的这个表单回车。回车之后呢？稍等啊，应该是访问哪个访问。我还得把它屏蔽一下，就说测确实不太好测，先找到这个地址，这个地址是吧。好，然后接下来呢，我我再把它屏蔽掉。把这个屏蔽就给它删掉好，这样就提交过来了，提交过来之后呢，还是F2这块啊。嗯。你你测的时候我看一下啊。访问好，提交过来，然后接下来就是你测的时候一定要开着这个network work，要不然它下面的这个请求了，它呢就是捕获不到啊，嗯，开着它，然后把这个地址粘过来，粘过来之后你递回车，诶，它就自动提交过来了，这样的话，我们的目的是捕获这个请求，好捕获这个请求之后呢，看这个请求里面是不是跟刚才一样，我们也有了mobile和sign啊这样的两个啊参数啊好，然后那个恢复宝这面它会做什么呢？他会对你的这个赛呢做校验。

校验完了之后呢，他会啊，这个就首先他会校验你这个散对不对，如果校验不对了，他就会，你看他是不是说签名错误呀，啊好，那这个就是签名失败，所以一会儿呢，我们提交的时候呢，我们一定要去生成这个正确的签名，明白吧，好，生成完正确的签名之后呢，我们再把其他的除了签名之外的其他的参数这些。都给它组装上，那这样的话，惠付宝这边就能够处理我们这个请求了，那目前为止呢，我们可以看到惠付宝那边呢，他肯定是首先校验签名了，所以呢，他才签名错误啊，这样的一个提示给我们提示出来，所以呢，接下来呢，我们要做的事情就是什么呀，就是动态的组装这个表单，然后接下来呢，并且在动态组装表单的过程当中呢，要动态的组装这些参数。

啊，然后接下来呢，在动态组装这些参数的过程当中呢，咱们要生成这个签名，把这个签名呢变成正确的签名，然后呢，让这个表单提交上去，提交上去之后，惠宝那边就可以去校验我们的签名了，当签名这边校验成功之后，会付宝这边就会展示一个页面，让我们去做具体的账户绑定的工作，所以这是我们又进一步对这个分析得到的一个结果啊，所以这块呢，就是我们对这个动态构建的表单模板的一个说明。