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

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