html基礎：jquery的ajax獲取form表單數據

jq是對dom進行的再次封裝。是一個js庫，極大簡化了js使用

jquery庫在js文件中，包含了所有jquery函數，引用：<script src="jquery-1.11.1.min.js"></script>

這里主要介紹jquery獲取頁面form數據使用的過程

html頁面代碼如下，有一個form表單，id是login_value.填寫內容后請求接口

<form id="login_value">
        <div>
            <label>用戶名：</label>
            <input id="username" type="text" name="username" placeholder="請輸入用戶名" value="admin">
        </div>
        <div>
            <label>密  碼：</label>
            <input id="passwd" type="password" name="passwd" placeholder="請輸入密碼" value="123456">
        </div>
        <div>
            <input type="button" value="登陸" onclick="login()">
            <input type="reset" value="重置">
        </div>


    </form>

ajax使用:ajax只能傳文本，不能傳文件。

$.ajax({})

獲取到數據，請求接口后，將接口返回信息顯示到頁面上

<script src="jquery-1.11.1.min.js"></script>//引用jquery文件
<script>
    function login(){
        var flag=confirm('你確認登陸么');//confirm時確認提示框，點擊確認返回true,點擊取消返回falseif(flag){//點擊彈框的確認
            $.ajax({
                method:"post",

            　　data:$('#login_value').serialize(),//jq提供的獲取form表單數據的快捷方式，通過form內標簽的name屬性{"username":"admin","passwd":"123456"}
                url:"http://localhost/api/user/login",
                success:function(data){//請求數據並返回結果給success,是一個對象，類似python的字典。回調函數。data只是一個函數的參數，跟上面的data不一樣
//                    console.log(data);

                    if(data.error_code==0){//登陸成功，error_code=0。因為data是字典格式，可用點獲取到
                        //成功
                        var sign = data.login_info.sign;//獲取接口返回信息
                        var userid = data.login_info.userId;
                        console.log(sign);
                        console.log(userid);

//                    拼接要顯示的內容的標簽
                        var sign_span = '<div><span>' + sign + '</span></div>';
                        var userid_span = '<div><span>' + userid + '</span></div>';
                        var form_object = document.getElementById('login_value');//獲取到form對象
                        form_object.insertAdjacentHTML('afterEnd', sign_span + userid_span)//插入到獲取標簽的最后
                        /*
                        *
                        * insertAdjacentHTML(where,tagStr): 父級標簽內添加一個子標簽字符串
                                beforeBegin: 插入到獲取到標簽的前面
                                afterBegin: 插入到獲取到標簽的子標簽的前面
                                beforeEnd: 插入到獲取到標簽的子標簽的后面
                                afterEnd: 插入到獲取到標簽的后面
                        */
                    }
                    else{
                        alert(data.msg)
                    }
                }

            })

        }
        else{//點擊彈框的取消
            alert('點擊了取消')
        }
    }
</script>