表单 ajax 三种返回,javascprit form表单提交前验证以及ajax返回json

1.今天要做一个手机验证码验证的功能。需求是前端页面点击发送 短信验证码，后台接收后通过ajax返回到前端，之后前端在提交时候进行验证。思路很简单，不过做的过程还是学到不少的东西、

1.ajax请求后返回

原因是我后台返回的时候没有加上：

@ResponseBody

注解。加上后返回的数据是json字符串，但是js只能操作json对象。需要把json字符串转为json对象。

一般的有三种方式

1.JSON.parse();如

var json = '{"key":"value","jian":"zhi"}';

var obj =JSON.parse(json);

console.log(obj); //控制台返回

Object console.log(obj.key); //控制台返回

value console.log(obj.jian); //控制台返回

2.通过eval 函数 如：

var json = '{"key":"value","jian":"zhi"}';

var obj = eval("(" + json + ")");

console.log(obj); //控制台返回 Object

console.log(obj.key); //控制台返回 value

console.log(obj.jian); //控制台返回 zhi

二者区别是evel方法 会执行json字符串里的代码。比如下面的value 会返回2

var value = 1;

var jsonstr = '{"name":"jifeng","company":"taobao","value":++value}';

var json2 = JSON.parse(jsonstr);

console.log(json2);

console.log('value: '+ value);

3.调用jquery的 $.parseJSON(string);用法同上。

参考：http://blog.csdn.net/qq_31655965/article/details/52037197

2.form表单提交前验证。

如果form表单是submit,则submit时候会直接提交，而不会验证。然后网上搜了很多，说是默认的submit是直接提交，可以使用button来代替onclick

this.form.submit(); 　　　　//直接提交表单

this.form.onsubmit(); 　　//调用form的onsubmit方法

this.form.fireEvent('onsubmit'); //同上,

条型码

然后自己测试后发现这种方式不行，虽然可以再提交前验证，但是当验证过了之后，发现提交没反应了。。。

参考：http://www.cnblogs.com/jiechn/p/3979433.html

然后又重新用jquery来下了下发现可以。

$(document).ready(function ()

{

$('#next').click(function()

{

var code = $("#verifyCode").val();

if(code == null || code == ""){

alert("请输入手机验证码");

return false;

}else if(vcode == null || vcode == "") {

alert("请发送手机验证码");

return false;

}else if(code != vcode){

alert("验证码不正确");

return false;

}

$('#form1').submit();

});

});

亲测这种方式可以。

Html form 表单提交前验证

可以使用form表单的onsubmit方法,在提交表单之前,对表单或者网页中的数据进行检验. onsubmit指定的方法返回true,则提交数据:返回false不提交数据. 直接看下面的代码: 1 & ...

使用form表单提交请求如何获取后台返回的数据？

问题描述 一般的form表单提交是单向的:只能给服务器发送数据,但是无法获取服务器返回的数据,也就是无法读取HTTP应答包. 想要真正的半双工通讯一般需要使用Ajax, 但是Ajax对文件传输也很麻烦 ...

JavaScript form表单提交与验证

原网址:https://blog.csdn.net/vipwxs/article/details/79119701 一.form对象的属性: name:获取表单的名称,该name一般给JS使用 met ...

Django之form表单提交并验证

1.提交的时候会报错 2. 需要在setting里面注释掉一句话,关闭跨站请求检查. 3. 注释掉以后,理论上就不报错了.可我还是卡壳了. 4. 通过在网上找方法,修复错误. 原因:表单action字 ...

form表单提交转为ajax方式提交

//action的值是请求的url地址

...

springmvc下js控制表单提交(表单提交前检验，提交后获取json返回值)

这个问题我搞了四天,终于搞懂.因为对js很不熟悉.郁闷的是后台代码出错总可以设置断点调试,前端js代码出错只能通过浏览器提供一些运行数据来分析,很不习惯. 首先说下逻辑:这是一个注册功能,我希望,注册 ...

随机推荐

Excel到底最多可以有多少行

平时我们使用的Excel到底最多可以有多少行? 答案:1048576,如图在红框中输入此数字即可看见.

lvs之nat技术的学习与实践

lvs nat 服务器搭建 1.配置三个虚拟机.一台用于做lvs  两台用于做web server 进行测试 (lvs服务器要配备两块网卡); lvs 服务器  两块网卡 分别为vmnet1   vm ...

JS控制flash的播放