我正在尝试从网页发送ajax发布数据，该数据是从由表格，日期选择框和注释文本框组成的表单中获取的。 但是，网站的这一特定部分不是静态的，因此该网页是在GET请求中以php文件构建的，并以base64返回，以进行解码并添加到网站中。
“主页”页面上的ajax是：
$.ajax({
type: "GET",
url: 'backend/ajax/webpage.php',
dataType: 'text',
data: {
message: 'UPDATE_WEBPAGE'
},
success: function(result) {
$('#main-content').html(window.atob(result));
},
error: function(error) {}
});
这将返回一个冗长的表，尽管我在下面将其最小化。
<div class="section__content section__content--p30">
<div class="container-fluid" id="content">
<div class="col-md-12">
<div class="overview-wrap">
<h2 class="title-1">Rosters</h2>
</div>
</br>
</div>
<div class="row">
<div class="col-lg-12">
<div class="card" style="border-radius: 10px;">
<div class="card-header">
<strong class="card-title">Roster for week starting:<span class="input-group date" style="width: 20%;" id="date" data-target-input="nearest">
<input id="date-input" type="text" placeholder="Week starting" class="form-control datetimepicker-input" data-target="#date"/>
<span class="input-group-append" data-target="#date" data-toggle="datetimepicker">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</span>
</span>
</strong>
<script>
$(function() {
$("#date").datetimepicker({
format: 'D/M/YYYY',
daysOfWeekDisabled: [0, 6]
});
});
</script>
</div>
<div class="card-body">
<form id="roster-form" action="">
<div class="form-group table-responsive table--no-card m-b-30">
<table id="roster" for="roster-form" class="table table-borderless table-earning" align="left">
<thead align="left">
<tr>
<th>Name</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody align="left">
<th id="$days[$day]" name="$days[$day]">
<div class="rs-select2--trans rs-select2--md" style="background-color: transparent;">
<select value="$name" name="$namestart" class="js-select2 select2-hidden-accessible" tabindex="-1" aria-hidden="true" style="background-color: transparent;max-width:5%;">
<option selected="selected" value="$pstime">$pstime</option>
";
<option value="05:00 am">05:00 am</option>
<option value="05:30 am">05:30 am</option>
<option value="05:45 am">05:45 am</option>
<option value="06:00 am">06:00 am</option>
<option value="06:15 am">06:15 am</option>
<option value="06:30 am">06:30 am</option>
<option value="06:45 am">06:45 am</option>
<option value="07:00 am">07:00 am</option>
<option value="07:15 am">07:15 am</option>
<option value="07:30 am">07:30 am</option>
<option value="07:45 am">07:45 am</option>
<option value="08:00 am">08:00 am</option>
<option value="08:15 am">08:15 am</option>
<option value="08:30 am">08:30 am</option>
<option value="08:45 am">08:45 am</option>
<option value="09:00 am">09:00 am</option>
<option value="09:15 am">09:15 am</option>
<option value="09:30 am">09:30 am</option>
<option value="09:45 am">09:45 am</option>
<option value="10:00 am">10:00 am</option>
<option value="10:15 am">10:15 am</option>
<option value="10:30 am">10:30 am</option>
<option value="10:45 am">10:45 am</option>
<option value="11:00 am">11:00 am</option>
<option value="11:15 am">11:15 am</option>
<option value="11:30 am">11:30 am</option>
<option value="11:45 am">11:45 am</option>
<option value="12:00 pm">12:00 pm</option>
<option value="12:15 pm">12:15 pm</option>
<option value="12:30 pm">12:30 pm</option>
<option value="12:45 pm">12:45 pm</option>
<option value="1:00 pm">1:00 pm</option>
<option value="1:15 pm">1:15 pm</option>
<option value="1:30 pm">1:30 pm</option>
<option value="1:45 pm">1:45 pm</option>
<option value="2:00 pm">2:00 pm</option>
<option value="2:15 pm">2:15 pm</option>
<option value="2:30 pm">2:30 pm</option>
<option value="2:45 pm">2:45 pm</option>
<option value="3:00 pm">3:00 pm</option>
<option value="3:15 pm">3:15 pm</option>
<option value="3:30 pm">3:30 pm</option>
<option value="3:45 pm">3:45 pm</option>
<option value="4:00 pm">4:00 pm</option>
<option value="Close">Close</option>
</select>
</div>
<div class="rs-select2--trans rs-select2--md" style="background-color: transparent;>
<select value=" $name " name="$namefinish " class="js-select2 select2-hidden-accessible " style="background-color: transparent;max-width:5%; ">
<option value="$pftime ">$pftime</option>
"; <option value="05:00 am">05:00 am</option>
<option value="05:30 am">05:30 am</option>
<option value="05:45 am">05:45 am</option>
<option value="06:00 am">06:00 am</option>
<option value="06:15 am">06:15 am</option>
<option value="06:30 am">06:30 am</option>
<option value="06:45 am">06:45 am</option>
<option value="07:00 am">07:00 am</option>
<option value="07:15 am">07:15 am</option>
<option value="07:30 am">07:30 am</option>
<option value="07:45 am">07:45 am</option>
<option value="08:00 am">08:00 am</option>
<option value="08:15 am">08:15 am</option>
<option value="08:30 am">08:30 am</option>
<option value="08:45 am">08:45 am</option>
<option value="09:00 am">09:00 am</option>
<option value="09:15 am">09:15 am</option>
<option value="09:30 am">09:30 am</option>
<option value="09:45 am">09:45 am</option>
<option value="10:00 am">10:00 am</option>
<option value="10:15 am">10:15 am</option>
<option value="10:30 am">10:30 am</option>
<option value="10:45 am">10:45 am</option>
<option value="11:00 am">11:00 am</option>
<option value="11:15 am">11:15 am</option>
<option value="11:30 am">11:30 am</option>
<option value="11:45 am">11:45 am</option>
<option value="12:00 pm">12:00 pm</option>
<option value="12:15 pm">12:15 pm</option>
<option value="12:30 pm">12:30 pm</option>
<option value="12:45 pm">12:45 pm</option>
<option value="1:00 pm">1:00 pm</option>
<option value="1:15 pm">1:15 pm</option>
<option value="1:30 pm">1:30 pm</option>
<option value="1:45 pm">1:45 pm</option>
<option value="2:00 pm">2:00 pm</option>
<option value="2:15 pm">2:15 pm</option>
<option value="2:30 pm">2:30 pm</option>
<option value="2:45 pm">2:45 pm</option>
<option value="3:00 pm">3:00 pm</option>
<option value="3:15 pm">3:15 pm</option>
<option value="3:30 pm">3:30 pm</option>
<option value="3:45 pm">3:45 pm</option>
<option value="4:00 pm">4:00 pm</option>
<option value="Close">Close</option>
</select>
<span class="dropdown-wrapper" style="background-color: transparent;" aria-hidden="true"></span>
</div>
</th>
</tbody>
</table>
</div>
<div class="row">
<div class="col-lg-12">
<div class="card" style="border-radius: 10px;">
<div class="card-header">
<strong class="card-title">
Comments
</strong>
</div>
<div class="card-body">
<div class="form-group">
<textarea class="form-control" id="roster-comments" rows="4"></textarea>
</div>
</div>
</div>
<button type="submit" form="roster-form" class="btn btn-primary btn-lg btn-block">Submit Roster</button>
<a href="#" id="download">Download Roster</a></br>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$("#roster-form").submit(function(e) {
e.preventDefault();
var roster = {};
var data = JSON.stringify($("#roster-form").serializeArray());
//I understand this is where i need to loop through the data and create the json object to send to rostersfunc.php although I'm lost.
$.ajax({
type: 'POST',
url: 'backend/ajax/rostersfunc.php',
dataType: 'json',
data: {
message: "UPDATE_ROSTER",
data: data
},
success: function(result) {},
error: function() {}
});
});
$(document).ready(function() {
$('.js-select2').select2({
minimumResultsForSearch: -1
});
});
});
</script>
我认为我需要遍历表单数据的serializeArray输出或数据的序列化输出，并将day_name_start / finish分成4个部分，即day，name，start / finish和value，尽管我是没有这样做。
当前输出如下：
post data = [{
"name": "monday_bob_start",
"value": "x am/pm"
}, {
"name": "monday_bob_finish",
"value": "y am/pm"
}, {
"name": "tuesday_bob_start",
"value": "x am/pm"
}, {
"name": "tuesday_bob_finish",
"value": "y am/pm"
}, {
"name": "wednesday_bob_start",
"value": "x am/pm"
}, {
"name": "wednesday_bob_finish",
"value": "y am/pm"
}, {
"name": "thursday_bob_start",
"value": "x am/pm"
}, {
"name": "thursday_bob_finish",
"value": "y am/pm"
}, {
"name": "friday_bob_start",
"value": "x am/pm"
}, {
"name": "friday_bob_finish",
"value": "y am/pm"
}, {
"name": "saturday_bob_start",
"value": "x am/pm"
}, {
"name": "saturday_bob_finish",
"value": "y am/pm"
}, {
"name": "sunday_bob_start",
"value": "x am/pm"
}, {
"name": "sunday_bob_finish",
"value": "y am/pm"
}]
我正在努力实现这一目标：
roster = {
"monday": {
"bob": {
"startTime": x,
"finishTime": y
}
},
"tuesday": {
"bob": {
"startTime": x,
"finishTime": y
}
},
"wednesday": {
"bob": {
"startTime": x,
"finishTime": y
}
},
"thursday": {
"bob": {
"startTime": x,
"finishTime": y
}
},
"friday": {
"bob": {
"startTime": x,
"finishTime": y
}
},
"saturday": {
"bob": {
"startTime": x,
"finishTime": y
}
},
"sunday": {
"bob": {
"startTime": x,
"finishTime": y
}
}
}
答案 0 :(得分：1)
postData中的元素进行重复name分割_值，以得到具有所需JSON内路径的数组roster中创建此路径value分配到roster中的给定路径
var roster = {};
var postData = $("#roster-form").serializeArray();
var len = postData.length, i, elem;
for(i=0; i<len; i++)
{
var path = postData[i].name.split("_");
elem = roster;
while(path.length)
{
key = path.shift();
if(path.length)
{
if(typeof elem[key] === "undefined") elem[key] = {};
elem = elem[key];
}
}
elem[key] = postData[i].value;
}