【Jquery】jQuery 提交form表單並解析 url 參數


應用場景: jquery + ajax 表單提交,一次性獲取所有表單,並解析到post 參數

常用點 1 :

//獲取所有表單參數: 結果格式為: a=1&b=2&c=3
$('form').serialize(); 

常用點 2 :jquery 解析 url參數

//封裝方法
(function($) {
    var re = /([^&=]+)=?([^&]*)/g,
    decodeRE = /\+/g,
    decode = function (str) { return decodeURIComponent( str.replace(decodeRE, " ") ); };

    $.parseParams = function(query) {
        let params = {}, e;
        while ( e = re.exec(query) ) params[ decode(e[1]) ] = decode( e[2] );
        return params;
    };
})(jQuery);


//使用方法 : 
var formdata = 'a=1&b=2&c=3';
var json_data = $.parseParams(formdata); //json_data 格式 : {a:1,b:2,c:3}

完整使用的示例代碼

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>login</title>
    <link rel="stylesheet" href="__CPLUGINS__/weui/css/weui.css" />
</head>

<body>
        
    <div class="weui-form__control-area">
        <div class="weui-form__text-area">
            <h2 class="weui-form__title">login</h2>
        </div>

        <form method="post" >
            <div class="weui-cells__group weui-cells__group_form">
               <div class="weui-cells weui-cells_form">
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd"><label class="weui-label">用戶名</label></div>
                        <div class="weui-cell__bd">
                            <input  class="weui-input" name="user_name"  placeholder="請輸入"/>
                        </div>
                    </div>
                    <div class="weui-cell weui-cell_active">
                        <div class="weui-cell__hd"><label class="weui-label">密碼</label></div>
                        <div class="weui-cell__bd">
                            <input  class="weui-input"  name="pass"  placeholder="請輸入"  />
                        </div>
                    </div>
                </div>
            </div>
        </form>

    </div>

    <div class="weui-form__opr-area">
        <a class="weui-btn weui-btn_primary" href="javascript:"  id='send'  >確定</a>
    </div>
   
</body>

<script type="text/javascript" src="__MJS__/jquery-2.1.0.js"></script>

<script>

    //監聽提交
    $('#send').on('click', function () {
        //獲取所有的form表單參數
        var alldata = $('form').serialize(); 
        //此處調用下方的封裝函數  
        form_param = $.parseParams(alldata);  
        //ajax請求
        $.post("/reg_send", {
                user_name: form_param.user_name,
                pass: form_param.pass,
            }, function (res) {
                layer.msg(res.message)
                if (res.status == 2) {
                    //成功
                }
        });
        
        return false;
    });



    //解析參數: 此處是封裝的函數,
    (function($) {
        var re = /([^&=]+)=?([^&]*)/g,
            decodeRE = /\+/g,
            decode = function (str) { return decodeURIComponent( str.replace(decodeRE, " ") ); };

        $.parseParams = function(query) {
            let params = {}, e;
            while ( e = re.exec(query) ) params[ decode(e[1]) ] = decode( e[2] );
            return params;
        };
    })(jQuery);

</script>

</html>



免責聲明!

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



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