我有这个页面，你可以在图片中看到。
此页面包含三个选项卡。我希望这些选项卡可以与 AJAX 一起使用。因此，如果用户单击这些选项卡（而不是直接地址），我希望它们被打开。但是这些选项卡有表格，您可以看到备份表格。我希望当用户单击提交按钮时，如果发布数据成功，则页面返回此选项卡（例如备份选项卡）。由于使用 AJAX，它不像我想要的那样工作，也没有在响应 div 中显示任何内容。看来 submitSearchForm 功能根本不起作用！你能告诉我有什么问题吗？
我的 HTML 是：
<form name="backupForm" action="backup/" method="POST" id="backupSubmit">
//my form fields are here
<p><input type="submit" onclick="submitSearchForm('backupSubmit')" value="دانلود" id="sendButton" style="margin-bottom:10px; cursor:pointer;></p>
<div class="response" style="height: auto;></div>
我的 AJAX 功能：
function submitSearchForm(id){
event.preventDefault();
var temp = $("#"+id).serialize();
validateForm();
jQuery.ajax({
type:"POST",
data:temp,
url:'/backup/',
success:function(data){
$(".response").slideDown(800).html(data);
}
});
我在views.py中的代码：
def backup(request):
if request.is_ajax():
if request.method=='POST':
variables = RequestContext(request,{})
return render_to_response('backup.html',variables)
else:
return render_to_response('backup.html')
else:
return render_to_response("show.html", {
'str': "bad Request! :(",
}, context_instance=RequestContext(request))
backup = login_required(backup)
编辑：我有一个名为 base.html 的页面。在此页面中，我创建了选项卡，当单击一个选项卡时，将调用该选项卡的 url。我所有的三个标签都有自己的页面。它们不在同一页面中。）
base.html
{% block extrahead %}
<script type="text/javascript">
$( document ).ready( function() {
$( '#backup_list' ).click( function() {
$('#firstRemove').remove();
$( '#backup' ).html( 'waiting ...' ).load( '{% url backup %}');
});
$( '#restore_list' ).click( function() {
$('#firstRemove').remove();
$( '#restore' ).html( 'waiting ...' ).load( '{% urlrestore %}');
});
$( '#expert_question' ).click( function() {
$('#firstRemove').remove();
$( '#expertQuestion' ).html( 'waiting ...' ).load( '{% url expertQuestion %}');
});
});
$( document ).ajaxStart( function() {
$( '#loading' ).fadeIn(400);
}).ajaxStop( function() {
$( '#loading' ).fadeOut(400);
});
</script>
{% 端块 %}
<div id="dRtabs">
<ul class="tabber">
<li><a id="backup_list" href="#backup">backup</a> </li>
<li><a id="restore_list" href="#restore">restore</a> </li>
<li><a id="expert_question" href="#expertQuestion">Expert Question</a> </li>
</ul>
<div class="clear"></div>
<div id="backup" class="tabContent">
<div id="firstRemove">
{% block mSettings_body %}{% endblock %}
</div>
</div>
<div id="restore" class="tabContent">
loading...
</div>
<div id="expertQuestion" class="tabContent">
loading...
</div>
</div>
如果我想在页面加载时默认加载第一个选项卡，我应该怎么做？
EDIT2：我在 jQuery.ajax 之前调用 validateForm 函数，在这个函数中我调用其他三个函数来检查表单验证，如下所示：
function validateForm()
{
validateStartDate();
validateEndDate();
validateCheckbox();
}
我检查用户是否没有将这些字段留空。例如 validateStartDate() 是这样的：
function validateStartDate()
{
var x=document.forms["backupForm"]["startDate"].value;
if (x==null || x=="")
{
// alert("Start date must be filled out");
// or show a hidden label with this error
return false;
}
}
但它会发出警报，然后执行成功函数中的代码！我不知道为什么会这样，而我写代码强制它返回false。