應用場景: 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>