支付相关——账户充值的异步实现过程 [ 技术分享 ]

首先说明一下，本篇文章是在自己开发过程中因为遇到了关于异步充值的功能，绕了弯路又得已解决，基于此，顺手写下来以作记录，不是很高明的手法，希望给遇到相同问题的“猿猿”们提供一点帮助。

具体情形是这样的：用户登录自己账号后给其他账号进行会员充值，当然目前很多软件都已经支持这种功能，比如alipay的话费充值啊神马的，web实现这种功能的时候也不是很复杂，主要借用Ajax进行前后台的交互，如何交互网上有大量资料和源码可以参考，这里不再具体阐述，简略说一下思路。 1.账号检测——事件触发提交信息——异步方式将数据传到后台——后台捕获数据——数据处理——数据封装反馈至前台——前台捕获数据并处理（这里可以包含很多JS动作）——显示；

2.支付过程——表单或Ajax提交数据——后台捕获数据——后台处理——调用支付接口——创建支付表单——提交支付表单——支付处理——回调函数——状态判断——状态处理——支付（是/否——不同定向）；

需求的条件是只有一个表单内部的提交按钮，一个输入框以及其他必须的隐藏数据，完成账号检测和根据检测结果来决定是否提交表单给后台，思路看起来很简单，用JS处理账号检测，Ajax同步请求（不了解可以去百度哦），这个过程会有一个类似锁屏的状态，简单来说就是在得到后台数据返回之前当前页面显得很卡，这就很影响用户体验，不知道还以为页面崩溃了呢，出于这一点同步请求不是很好的解决方案。到这里问题简化一下，就是在提交给支付后台之前完成账号检测，而且只有一个按钮可以触发事件，另一个可以触发事件的是输入框，为了尽量给用户更好的体验同时实现异步请求，那就减小web页面卡住的范围，使用输入框焦点变化触发检测事件，提交按钮不可点击，完成检测后相应的改变按钮属性，达到控制提交表单的功能，其实就是在账号检测的过程中通过改变按钮属性避免此时触发提交事件，另外表单里直接用ajax异步请求，脚本解析时不会等待ajax的处理结果，而是直接解释性质的编译，不会起到同步检测作用，所以通过缩小同步范围来达到预期需求。 （原创话题，欢迎指正交流，转帖请注明出处，谢谢~）