原生异步提交与接收
开发工具与关键技术：VS JS Ajax
作者：宋永烨
撰写时间：2019/3/30
JavaScript的原生异步提交,代码不是很多,于是就加上了如何接收提交的数据,同时也可以验证提交是否成功
- 视图层接收数据
视图层接收用户的数据,大多使用form表单来接收,不同的数据用不同的表单组件
用户在相应的组件上输入数据后,我们可以通过该组件的Value值来获取用户输入的信息,然后将他传给视图层 - 视图层发送数据
发送数据的代码较为复杂,但主要是为兼容性考虑,原生代码相较之与Jquery封装好的代码,比较多
以下代码为一个调用异步提交的按钮与一个异步提交方法,格式较为固定,因此代码的相同点会比较多.
异步提交主要调用的方法时window下面的XMLHttpRequest方法绝大多数人类浏览器都兼容,除了IE5与IE6,因此需要判断浏览器是否纯在XMLHttpRequest这个方法,如果没有,则用ActiveXObject这个方法,
将提交函数赋值给变量.然后调用变量中open方法来指名发送的方式与发送的地址(url),最后使用send方法将需要发送的数据赋值的变量发送 - 控制器接收数据
在控制器中创建一个接收方法(图中的返回值只是用来占位置的),当视图层通过异步提交发送数据时,调用了本方法,那将会在断点处停止,而用于接收值的变量,则被赋予了值,由于篇幅关系,便不做验证,有兴趣的可以自己去试,接收方法有几种,下图所示的只是其中之一.
XMLHttpRequest提交过来的数据是一个Form集合,通过Request.From[“视图层form表单的name”来获取值]来获取到异步提交发送的值
总结:
1.form表单中的name值非常重要,他是接收获取值得关键性的名称,千万检查是否存在错漏
2.由于XMLHttpRequest提交的是一个Json字符串类型的数据,所以用于接收的变量的类型请申明为string或var,当然,修改接收到的值的类型除外
3.由于接收到的值是一个字符串类型,如果别的需求,记得该数据类型
4.本接收方法仅适用于POST 提交,如果是get提交则获取不到视图层获取的值
异步提交的代码借鉴了老师的代码
如有错漏,请指正