我试图使用完整日历。我试图在事件拖拽之前保存事件。但阿贾克斯读到最后。下面是我的代码：
$('#event_add').unbind('click').click(function() {
title = $('#event_title').val();
event_url = $('#event_url').val();
stime = $('#event_stime_hr').val() + ':' + $('#event_stime_min').val();
etime = $('#event_etime_hr').val() + ':' + $('#event_etime_min').val();
allday = $('#chkallday').val();
eventTime = '';
if(stime.length > 1){
stime = stime + ' ' + $('#optstime').val();
eventTime = stime;
if(etime.length > 1){
etime = etime + ' ' + $('#optetime').val();
eventTime = eventTime + ' to ' + etime;
}
}
if(title.length===0){
$('#erreventtitle').html('Event title is required');
}else{
$('#erreventtitle').html('');
var eventDetails = eventTime + ' ' + title;
var eventid = null;
$.ajax ({
type: "GET",
url: "calendar/save?",
data: 'title='+title+'&stime='+stime+'&etime='+etime+'&allday='+allday+'&bgcolor=&url='+event_url,
cache: false,
success: function(data){
eventid = data;
console.log(data);
console.log('savedata');
}
});
console.log('add event');
addEvent(eventDetails, eventid);
}
});
控制台中的输出。
add event
save data
我想知道为什么 ajax 代码最后读取。谢谢你的帮助。
Ajax 调用异步运行，因此它们与页面上的其他脚本并行执行。调用$.ajax命令时，它会触发一个单独的代码线程来进行调用并等待响应。同时，外部函数的其余部分将继续执行。
因此，鉴于调用服务器并接收响应通常涉及时间延迟，无论多么小，紧跟在$.ajax命令之后的代码行(在本例中为console.log('add event'); addEvent(eventDetails, eventid);(极有可能在 ajax"成功"回调运行之前执行，因为这仅在服务器返回响应后发生。
这会给你带来一个问题，因为你依赖于接收来自服务器的eventid变量，以便将其传递给你的addEvent()方法。现在的代码方式，当您运行addEvent()时，eventid99.99% 肯定是未定义的。
简单的解决方案是在"成功"函数中移动这些代码行，这样您就可以保证在服务器成功响应之前它们不会执行。
$.ajax ({
type: "GET",
url: "calendar/save?",
data: { "title": title, "stime": stime, "etime", etime, "allday": allday, "bgcolor": bgcolor, "url": event_url },
cache: false,
success: function(data){
var eventid = data;
console.log(data);
console.log('savedata');
console.log('add event');
addEvent(eventDetails, eventid);
}
});
设计说明 1：我还更改了传递对象的data选项，因此 jQuery 可以适当地完成对变量进行编码的繁重工作。您不必这样做，但它更可靠。
设计说明 2：像这样使用 GET 将数据发送到服务器是非常规的(线索在方法名称中，想法是让它获取数据(，正常的约定是使用 POST 甚至 PUT。但这是您的设计选择。
设计说明 3：您可能还需要考虑通过根据 jQuery ajax 文档添加"错误"回调来处理来自服务器的任何错误，然后您可以在出现任何网络问题或数据验证错误时显示用户友好的消息(您正在服务器上验证数据，对吗？如果不是，你真的应该，以防止恶意或只是无效的输入。如果您需要在成功响应后通常执行的错误时执行任何类似操作，例如关闭模态或更新某些 UI 或其他操作，它也会有所帮助。请参阅 http://api.jquery.com/jQuery.ajax/
设计说明 4：.unbind()被高级.off()取代(及其孪生.bind()在 jQuery 1.7 中被.on()方法取代。从jQuery 3.0开始，它已被正式弃用，因此您可以期望它将来被删除。我会尽快切换到使用.off()(如果需要，.on()(。请参阅 http://api.jquery.com/unbind/
Ajax 调用是异步的，因此在执行时，以下代码行也会执行。
根据服务器端的响应速度，完成后将打印"保存数据"。
$.ajax ({
type: "GET",
url: "calendar/save?",
data: 'title='+title+'&stime='+stime+'&etime='+etime+'&allday='+allday+'&bgcolor=&url='+event_url,
cache: false,
success: function(data){
eventid = data;
console.log(data);
console.log('savedata');
addEvent(eventDetails, eventid);
}
});
});