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提交表單的全部的內容~~~