Ajax提交表单(form)数据并获取返回值(表单注册和登陆)

ajax提交表单数据

1.首先禁用form表单submit使用button按钮实现ajax传输!!!

前端代码:

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']);
                            }                               
                        }
                    });
            }

以上就是ajax提交表单的全部的内容~~~

你可能感兴趣的