ajax提交表单数据
1.首先禁用form表单submit使用button按钮实现ajax传输！！！
前端代码：
<form action="" method="">
<input type="text" name="username" class="username" placeholder="Username">
<input type="text" name="nickname" class="nickname" placeholder="Nickname">
<input type="email" name="email" class="email" placeholder="E-mail">
<input type="password" name="password" class="password" placeholder="Password">
<input type="text" name="class_id" class="class_id" placeholder="Class">
<button type="button" onclick="register_fun()">Register</button><!--使用button按钮事件-->
</form>
2.在js中添加时间进行ajax传输数据具体见代码和注释！！！
js代码：
function register_fun(){
var data = $('.page-container .register form');//首先需要引入jquery当然js也可以
var username = data.find('.username').val();
var password = data.find('.password').val();
var nickname = data.find('.nickname').val();
var email = data.find('.email').val();
var classId = data.find('.class_id').val();
if(username == '') { //判断内容是否为空
data.find(".error").css('display', 'block'); //提示在css中事先写好
data.find(".error").css('top', '27px');
return false;
}
if(nickname == '') {
data.find(".error").css('display', 'block');
data.find(".error").css('top', '96px');
return false;
}
if(email == '') {
data.find(".error").css('display', 'block');
data.find(".error").css('top', '165px');
return false;
}
if(password == '') {
data.find(".error").css('display', 'block');
data.find(".error").css('top', '234px');
return false;
}
if(classId == '') {
data.find(".error").css('display', 'block');
data.find(".error").css('top', '304px');
return false;
}
$.ajax({
url: 'http://192.168.1.101:9000/auth/register', //在这里提填写你的地址
async: false,
dataType: 'jsonp', //这里用到了jsonp跨域问题
data:{'username': username, //传输数据
'password': password,
'nickname': nickname,
'class_id': classId,
'email': email
},
type:'get', //传输方法应该用post好像jsonp不能用post这里用get这里如何使用post还没想到
jsonp:"callback_register",
crossDomain: true,
jsonpCallback:"callback_register", //获取返回的数据类型
success: function (json_str) { //一些注册提示
if(json_str['status']==1){
alert("恭喜你注册成功了");
register.style.display="none";
login.style.display="block";
aH[1].style.borderBottom="5px solid #cccc00";
aH[0].style.borderBottom="";
}
else{
alert(json_str['message']);
}
}
});
}
