在 MVC 和 knockout.js 应用程序调用中使用以下函数进行
GetCalendar: function (monthYear) {
var html = '';
$.ajax({
url: baseURL + 'ajax/GetCalendarHTML',
type: 'GET',
cache: true,
data: {
month: monthYear.month, year: monthYear.year
},
success: function (cal) {
$('#cal' + monthYear.month + monthYear.year).html(cal);
},
error: function (data) {
}
});
return html;
}
这会以 json 形式将数据转换为 HTML,如下所示
<table cellspacing='0' class='calendar'><thead> <tr class='month-year'><th colspan='7'><span class='month'>March</span><span class='year'>2023</span></th></tr><tr class='weekdays'> <td>Sun</td> <td>Mon</td> <td>Tue</td> <td>Wed</td> <td>Thu</td> <td>Fri</td> <td>Sat</td></tr></thead><tbody border='1'><tr><td class='premonth'></td><td class='premonth'></td><td class='premonth'></td><td style='background-color:#886B29'>1</td><td style='background-color:#886B29'>2</td><td style='background-color:#886B29'>3</td><td style='background-color:#886B29'>4</td></tr><tr><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td></tr><tr><td style='background-color:#FEF200'>12</td><td style='background-color:#FEF200'>13</td><td style='background-color:#FEF200'>14</td><td style='background-color:#FEF200'>15</td><td style='background-color:#FEF200'>16</td><td style='background-color:#FEF200'>17</td><td style='background-color:#FEF200'>18</td></tr><tr><td style='background-color:#FEF200'>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td style='background-color:#a02647'>25</td></tr><tr><td style='background-color:#a02647'>26</td><td style='background-color:#a02647'>27</td><td style='background-color:#a02647'>28</td><td style='background-color:#a02647'>29</td><td style='background-color:#a02647'>30</td><td style='background-color:#a02647'>31</td></tr></tbody></table>
但是这些请求每个月都会发送,并且由于某种原因需要很长时间。一些用户报告长达 5-7 分钟,但对我来说,它在 1 分钟内下载,这仍然很慢。
功能可以换成新的可以更快下载数据的东西
ajax/GetCalendarHTML?month=2&year=2023
这是6-7年前开发的老应用
我将其转换为 Fetch 请求,但这不起作用
async function GetCalendar(monthYear) {
try {
const response = await fetch('${baseURL}ajax/GetCalendarHTML?month=${monthYear.month}&year=${monthYear.year}', {
cache: 'default',
method: 'GET'
});
if (!response.ok) {
throw new Error('Network response was not ok');
}
const cal = await response.text();
$('#cal' + monthYear.month + monthYear.year).html(cal);
return cal;
} catch (error) {
console.error('Error fetching calendar:', error);
}
}