양식 데이터를 JSON으로 직렬화
Backbone.js 모델에서 양식의 사전 서버 검증을 수행하려고 합니다.이렇게 하려면 양식에서 사용자 입력을 사용 가능한 데이터로 가져와야 합니다.이를 위한 세 가지 방법을 찾았습니다.
var input = $("#inputId").val();var input = $("form.login").serialize();var input = $("form.login").serializeArray();
안타깝게도, 그 중 어느 것도 제가 필요로 하는 좋은 가독성과 개발 가능한 JSON 객체를 제공하지 않습니다.Stack Overflow에서 이미 몇 가지 질문을 살펴보았지만 몇 가지 추가 라이브러리만 발견했습니다.
현재 jQuery 또는 Backbone.js인 Underscore.js는 도우미 메서드를 제공하지 않습니까?
저는 그런 기능에 대한 요청이 없다는 것을 상상할 수 없습니다.
HTML
<form class="login">
<label for="_user_name">username:</label>
<input type="text" id="_user_name" name="user[name]" value="dev.pus" />
<label for="_user_pass">password:</label>
<input type="password" id="_user_pass" name="user[pass]" value="1234" />
<button type="submit">login</button>
</form>
자바스크립트
var formData = $("form.login").serializeObject();
console.log(formData);
출력
{
"name": "dev.pus",
"pass": "1234"
}
Backbone.js 모델
var user = new User(formData);
user.save();
이 사용 사례에 대한 기능은 다음과 같습니다.
function getFormData($form){
var unindexed_array = $form.serializeArray();
var indexed_array = {};
$.map(unindexed_array, function(n, i){
indexed_array[n['name']] = n['value'];
});
return indexed_array;
}
용도:
var $form = $("#form_data");
var data = getFormData($form);
다음을 수행할 수 있습니다.
function onSubmit( form ){
var data = JSON.stringify( $(form).serializeArray() ); // <-----------
console.log( data );
return false; //don't submit
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit='return onSubmit(this)'>
<input name='user' placeholder='user'><br>
<input name='password' type='password' placeholder='password'><br>
<button type='submit'>Try</button>
</form>아래 코드가 도움이 될 것입니다.:)
//The function is based on http://css-tricks.com/snippets/jquery/serialize-form-to-json/
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
$(function() {
$('form.login').on('submit', function(e) {
e.preventDefault();
var formData = $(this).serializeObject();
console.log(formData);
$('.datahere').html(formData);
});
});
</script>
사용:
var config = {};
jQuery(form).serializeArray().map(function(item) {
if ( config[item.name] ) {
if ( typeof(config[item.name]) === "string" ) {
config[item.name] = [config[item.name]];
}
config[item.name].push(item.value);
} else {
config[item.name] = item.value;
}
});
이것이 도우미 기능 요구 사항을 충족하지 못한다는 것을 알지만, 제가 이 작업을 수행하는 방법은 jQuery의 $.each() 메서드를 사용하는 것입니다.
var loginForm = $('.login').serializeArray();
var loginFormObject = {};
$.each(loginForm,
function(i, v) {
loginFormObject[v.name] = v.value;
});
그런 다음 loginFormObject를 백엔드로 전달하거나 사용자 개체를 만들어 백본에 저장()할 수 있습니다.
같은 문제(복잡한 플러그인과 라이브러리에 들어가지 않고 검증)를 해결하려고 jQuery.serializeJ를 만들었습니다.SON, 직렬화를 개선합니다.중첩된 개체를 지원하는 배열입니다.
이 플러그인은 매우 인기를 끌었지만 다른 프로젝트에서 Backbone.js를 사용하여 Backbone.js 모델에 검증 로직을 작성하려고 합니다.그리고 백본을 만들었습니다.폼웰 - 유효성 검사 방법에 의해 반환된 오류를 폼에 직접 표시할 수 있습니다.
이 문제를 해결할 수 있는 답을 찾을 수 없었습니다.
[{name:"Vehicle.Make", value: "Honda"}, {name:"Vehicle.VIN", value: "123"}]
이 개체가 필요합니다.
{Vehicle: {Make: "Honda", "VIN": "123"}}
그래서 저는 이것을 해결할 수 있는 저만의 연재물을 써야 했습니다.
function(formArray){
var obj = {};
$.each(formArray, function(i, pair){
var cObj = obj, pObj, cpName;
$.each(pair.name.split("."), function(i, pName){
pObj = cObj;
cpName = pName;
cObj = cObj[pName] ? cObj[pName] : (cObj[pName] = {});
});
pObj[cpName] = pair.value;
});
return obj;
}
아마도 누군가에게 도움이 될 것입니다.
동일한 이름의 반복 양식 요소에 관심이 없는 경우 다음 작업을 수행할 수 있습니다.
var data = $("form.login").serializeArray();
var formData = _.object(_.pluck(data, 'name'), _.pluck(data, 'value'));
여기서 Underscore.js를 사용합니다.
JSON을 사용하여 양식을 보내는 경우, 전송 문자열에서 []을(를) 제거해야 합니다.jQuery 함수 serializeObject()를 사용하여 이 작업을 수행할 수 있습니다.
var frm = $(document.myform);
var data = JSON.stringify(frm.serializeObject());
$.fn.serializeObject = function() {
var o = {};
// var a = this.serializeArray();
$(this).find('input[type="hidden"], input[type="text"], input[type="password"], input[type="checkbox"]:checked, input[type="radio"]:checked, select').each(function() {
if ($(this).attr('type') == 'hidden') { //if checkbox is checked do not take the hidden field
var $parent = $(this).parent();
var $chb = $parent.find('input[type="checkbox"][name="' + this.name.replace(/\[/g, '\[').replace(/\]/g, '\]') + '"]');
if ($chb != null) {
if ($chb.prop('checked')) return;
}
}
if (this.name === null || this.name === undefined || this.name === '')
return;
var elemValue = null;
if ($(this).is('select'))
elemValue = $(this).find('option:selected').val();
else elemValue = this.value;
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(elemValue || '');
} else {
o[this.name] = elemValue || '';
}
});
return o;
}
이 상황에서 모듈로 사용하는 내용은 다음과 같습니다(helper.js 형식).
define(function(){
FormHelper = {};
FormHelper.parseForm = function($form){
var serialized = $form.serializeArray();
var s = '';
var data = {};
for(s in serialized){
data[serialized[s]['name']] = serialized[s]['value']
}
return JSON.stringify(data);
}
return FormHelper;
});
제가 하고 싶은 일을 할 다른 방법을 찾을 수 없는 것 같아서 좀 아쉽습니다.
그러면 JSON이 반환됩니다.
{"first_name":"John","last_name":"Smith","age":"30"}
Underscore.js 사용:
function serializeForm($form){
return _.object(_.map($form.serializeArray(), function(item){return [item.name, item.value]; }));
}
및 jQuery 회피하기 serializeArray다음 코드는 JSON 형식으로 양식 데이터를 직렬화하고 전송합니다.
$("#commentsForm").submit(function(event){
var formJqObj = $("#commentsForm");
var formDataObj = {};
(function(){
formJqObj.find(":input").not("[type='submit']").not("[type='reset']").each(function(){
var thisInput = $(this);
formDataObj[thisInput.attr("name")] = thisInput.val();
});
})();
$.ajax({
type: "POST",
url: YOUR_URL_HERE,
data: JSON.stringify(formDataObj),
contentType: "application/json"
})
.done(function(data, textStatus, jqXHR){
console.log("Ajax completed: " + data);
})
.fail(function(jqXHR, textStatus, errorThrown){
console.log("Ajax problem: " + textStatus + ". " + errorThrown);
});
event.preventDefault();
});
여기에 유용한 플러그인이 있습니다: https://github.com/macek/jquery-serialize-object .
문제는 다음과 같습니다.
앞으로 코어 직렬화 외에도 .serializeObject는 부울 값과 숫자 값에 대한 올바른 직렬화를 지원하여 두 경우 모두에 유효한 유형을 생성합니다.
>= 2.1.0에서 이러한 기능을 기대해 보십시오.
나의 기여:
function serializeToJson(serializer){
var _string = '{';
for(var ix in serializer)
{
var row = serializer[ix];
_string += '"' + row.name + '":"' + row.value + '",';
}
var end =_string.length - 1;
_string = _string.substr(0, end);
_string += '}';
console.log('_string: ', _string);
return JSON.parse(_string);
}
var params = $('#frmPreguntas input').serializeArray();
params = serializeToJson(params);
언급URL : https://stackoverflow.com/questions/11338774/serialize-form-data-to-json
'programing' 카테고리의 다른 글
| mongodb: 집계 명령의 실행 시간을 어떻게 볼 수 있습니까? (0) | 2023.06.20 |
|---|---|
| 표의 총 열 수를 sql로 가져오는 방법 (0) | 2023.06.20 |
| Python 사전에서 URL 매개 변수 (0) | 2023.06.20 |
| Excel에서 SQL Server로 데이터 가져오기 중 일부 데이터 가져오기 실패 (0) | 2023.06.20 |
| Python에서 파일이 열려 있는지 확인합니다. (0) | 2023.06.20 |