使用ajax提交表單

標籤：style   blog   color   os   使用   io   java   ar   for   

1、ajaxForm

作用：

（1）預先載入js事件到form

（2）提交action前js驗證表單

（3）提交action後，結果由js處理，不自動跳轉

要求：

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script><script type="text/javascript" src="js/jquery.form.js"></script>

樣本：

<script type="text/javascript">            //var error = document.getElementById(‘errorDiv‘);            //注意的是var error只在這裡聲明，不要賦值 ，賦值也是null            var error;            // wait for the DOM to be loaded             $(document).ready(function() {                error = document.getElementById(‘errorDiv‘);                // bind ‘myForm‘ and provide a simple callback function                   var options = {                    //target:        ‘#output1‘,   // target element(s) to be updated with server response                     beforeSubmit : validate,// pre-submit callback                     dataType : ‘json‘,// ‘xml‘, ‘script‘, or ‘json‘ (expected server response type)                     //dataType必須放在callback(json)前面，因為callback(json)要調用json這個變數                    success : function(json) {                        json = eval(json);                        if (json.errcode == 0) {                            window.location.href = ‘seller/seller.jsp‘;                        } else {                            error.innerHTML = "帳號和密碼錯誤，請重新登入.";                        }                    }                // post-submit callback                 // other available options:                 //url:       url         // override for form‘s ‘action‘ attribute                 //type:      type        // ‘get‘ or ‘post‘, override for form‘s ‘method‘ attribute                 //clearForm: true        // clear all form fields after successful submit                 //resetForm: true        // reset the form after successful submit                 // $.ajax options can be used here too, for example:                 //timeout:   3000                 };                $(‘#loginForm‘).ajaxForm(options);            });            function validate() {                var username = document.getElementById("name").value;                var password = document.getElementById("pwd").value;                //檢測是否為空白可以將其交給前台處理;                  if (username.length == 0) {                    error.innerHTML = "帳號不可為空";                    return false;                } else if (password.length == 0) {                    error.innerHTML = "密碼不可為空";                    return false;                }                error.innerHTML = "正在登入";            }        </script>

 

 

Done

使用ajax提交表單