jquery的ajax獲取form表單數據、提交表單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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM