Javascript 要使用AJAX加载的选项卡

我有这一页，你们可以在图中看到。 此页面包含三个选项卡。我希望这些选项卡与AJAX一起工作。所以我希望，如果用户单击这些选项卡（而不是直接地址），它们就会被打开。但是，这些选项卡都有表单，您可以看到备份表单。我希望当用户单击提交按钮时，如果发布数据成功，页面返回到此选项卡（例如备份选项卡）。由于使用AJAX，它不能像我想要的那样工作，也不能在response 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>

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>

我检查用户是否将这些字段留空。 例如，validateStartDate（）的类似内容：

---

但它会发出警报，然后执行“成功中的代码”功能！我不知道为什么会这样，而我用代码强制它返回false。

主要问题是您实际上没有阻止表单提交，这是执行AJAX代码所必需的

event.preventDefault（）

仅在将

事件

对象传递到函数中时有效

这将有助于：

$(function() {
  $('#sendButton').click(function(e) {
      e.preventDefault();
      var temp = $("#backupSubmit").serialize();
      $.ajax({
          type: "POST",
          data: temp,
          url: 'backup/',
          success: function(data) {
              $(".response").slideDown(800).html(temp);
              console.log(data);
          }
      });
  });
});​

jsFiddle：

在

success

函数中，您需要在提交表单后放置所有应执行的代码。您的html应该如下所示：

function validateForm()
    {      
        validateStartDate();
        validateEndDate();
        validateCheckbox();
    }

<a href="#" id="tab1" class="tab">Tab1</a>
<a href="#" id="tab2" class="tab">Tab2</a>
<a href="#" id="tab3" class="tab">Tab3</a>

<div class="content" id="page1">
   <!-- content that should show when you click tab1 -->
</div>

<div class="content" id="page2">
   <!-- content that should show when you click tab2 -->
</div>

<div class="content" id="page3">
   <!-- content that should show when you click tab3 -->
</div>

别忘了这个css：

<style type="text/css">
  #page2, #page3 {display:none;}​
</style>

为此：

$( document ).ready( function() {
    $( '#backup' ).html( 'waiting ...' ).load( '{% url backup %}');
    $( '#backup_list' ).click( function() {

---

非常非常感谢。我编辑我的问题。你介意帮我一下吗？还有，“在success函数中，您需要在提交表单后放置所有应该执行的代码”是什么意思？我不应该在我的views.py中处理这些数据吗？（我用django写的。）我有一个函数，我这样称呼它：它以前工作得很好，但是现在$（'sendButton'）。点击（函数（e）{…}工作，它不再工作了，我很困惑为什么？！看看成功（）函数传入包含views.py响应的

data

。查看您的代码，看起来

data

将返回backup.html中的任何内容。我将更新问题以回答您的第二个问题。

onsubmit=“return validateForm（）”

不再工作的原因是您正在运行preventDefault（）单击submit按钮后，单击它将不再提交html表单，而是创建一个ajax请求。您需要在

$（“#sendButton”）中处理任何额外的验证。在ajax请求之前单击

函数。我不知道如何感谢您。真的谢谢。还有一个问题：我照您说的做了，并调用了validateForm（）在ajax请求之前。它的工作原理与我在validateForm（）函数中编写的一样。但是我想知道，虽然它没有经过验证（例如，字段为空），但为什么它在success函数中执行代码？为什么它被认为是成功的，而实际上不是。

$(function() {
 $('.tab').click(function(e) {
    e.preventDefault();
    the_id = $(this).attr("id").replace("tab","page");
    $('.content').hide();
    $('#'+the_id).show();
 });
});​

<style type="text/css">
  #page2, #page3 {display:none;}​
</style>

$( document ).ready( function() {
        $( '#backup_list' ).click( function() {

$( document ).ready( function() {
    $( '#backup' ).html( 'waiting ...' ).load( '{% url backup %}');
    $( '#backup_list' ).click( function() {