JQuery調用Ajax使用Submit方法後臺無法接受到發送的form表單

在使用jQuery調用ajax向後臺發送數據的時候
如果我們的事件發生的標記是點擊了submit按鈕
或許會發生後臺無法接受到傳遞的form表單的情況

這是因爲在web中點擊submit按鈕時
會觸動submit中的一個固定方法
其效果就是通過form的action傳遞表單刷新頁面
當然這個傳遞並不是通過ajax來實現的
可以理解爲是使用jsp來實現的

而我們使用jQuery調用ajax傳遞form表單數據的過程是在點擊了submit按鈕之後的
在傳遞之前我們的頁面就會被刷新

我們可以重寫這個固定方法
使其不通過action來傳遞form表單數據

當然也可以通過將submit按鈕改爲button亦或者其他元素來實現
以此來繞開submit

示例代碼:

<input value="註冊" id="user_register_button" class="button2" type="button" οnclick="ajax_user_register()" />



    function ajax_user_register() {

        var flag;

//      document.write("<script language=javascript src='check-username.js'></script>");
        var username = document.getElementById("user_register_username").value;
//      flag = check_username(username);
//      if(flag = false) {}

//      document.write("<script language=javascript src='check-contact.js'></script>”);
        var contact = document.getElementById("user_register_contact").value;
//      flag = check_contact(contact);
//      if(flag = false) {
//          
//      } else 
        if(contact.indexOf('@') > 0) {
            var mobilephone = 'null';
            var email = contact;
        } else {
            var mobilephone = contact;
            var email = 'null';
        }

//      document.write("<script language=javascript src='check-password.js'></script>”);
        var password = document.getElementById("user_register_password").value;
//      var ensurepassword = $("#user_register_ensurepassword");
//      if(flag = false) {}

        $.ajax({
            url: "../MedicatedDietHallServlet", //要請求的服務器url 
            data: {
                username: username,
                email: email,
                mobilephone: mobilephone,
                password: password,
                way: "user_register"
            },
            async: true,
            cache: false,
            type: "GET",
            dataType: "json",
            success: function(result) {
                if(result) {
                    location.reload(true);
                } else {
                    alert("你的用戶名已被註冊");
                }
            },
            erroe: function(){
                alert("連接服務器或返回數據失敗")
            }
        })
    }

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章