AJAX重定向到同一页面中的正确ID

Question

我有带有步骤向导的页面，其中所有步骤都在单个html模板上，可以通过页面id导航，例如"id='step-1'","id='step-2'" 。 我想在页面3上创建按钮以从输入框发送一些数据，问题是当我按下按钮时，它将我重定向到页面的开头，即在html模板顶部的step1上，但是我需要继续第三步。 按下按钮后是否可以保持原样？
step.html：

{% extends 'base.html' %}


{% csrf_token %}


  {% block step1 %}

<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
 <tr>
  <td> 
    <div id="wizard" class="swMain">
            <ul class="anchor">
              <li><a href="#step-1" class="selected" isdone="1" rel="1">
                    <label class="stepNumber"></label>
                    <span class="stepDesc">
                       Step 1<br>
                       <small>Generate</small>
                    </span>
                      </a></li>
              <li><a href="#step-2" class="disabled" isdone="0" rel="2">
                    <label class="stepNumber"></label>
                    <span class="stepDesc">
                       Step 2<br>
                       <small>test</small>
                    </span>
                </a></li>
              <li><a href="#step-3" class="disabled" isdone="0" rel="3">
                    <label class="stepNumber"></label>
                    <span class="stepDesc">
                       Step 3<br>
                       <small>generate server keys</small>
                    </span>                   
                 </a></li>
              <li><a href="#step-4" class="disabled" isdone="0" rel="4">
                    <label class="stepNumber"></label>
                    <span class="stepDesc">
                       Step 4<br>
                       <small>create</small>
                    </span>                   
                </a></li>
            </ul>


      <div style="height: 312px;" class="stepContainer"><div style="display:    none;" class="content" 
             id="step-1">  
                <h2 class="StepTitle">Step 1 Generate and Test Key </h2>
                <ul type="disk">

                </ul>
                <p><h3>Welcome!</h3>
                </p>
                <p>
               This wizard will help you 
                </p>
                <p>

                </p>                
                <div>

            </div>
            <div style="display: block;" class="content" id="step-2">
                <h2 class="StepTitle">Step 2 Content</h2> 

            </div>
            <div style="display: none;" class="content" id="step-3">
                <h2 class="StepTitle">Step 3 Content</h2> 

 <form class="form-horizontal" id="your-form-id" >

               <div class="form-group">
                <label for="inputText" class="col-sm-2 control-label"></label>
                <div class="col-sm-6">
                  <input type="text" id="1" class="form-control" 
                  placeholder="Your country short name,e.g US " pattern="^[_A-Z]{1,}$" maxlength="2" required>
                </div>
              </div>
              <div class="form-group">
                <label for="inputText" class="col-sm-2 control-label">Province</label>
                <div class="col-sm-6">
                  <input type="text" id="k-prov" class="form-control" 
                   placeholder="Your province" required>
                </div>
              </div>

                <button type="submit" id = "vars-data-promt">Upload text</button>
<div class="col-md-3 ">
                  <button type="submit" method="POST"  id="s3-btn"
                  class="form-inline btn btn-info pull-left">Generate</button>
                </div>
                </form>


                <p>

                </p>                                
            </div>
            <div style="display: none;" class="content" id="step-4">
                <h2 class="StepTitle">Step 4 Content</h2> 

                <div>
                    <form>
                    <h4>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h4>
                    </form>

                </div>
            </div>
          </div>

  </td>
 </tr>
</tbody>
</table>



{% endblock %}

Answer 1

为了避免在提交后重定向页面，我编写了脚本，该脚本从上面显示的模板中的每个步骤发送发帖请求，如下所示：

$('#your-form-id').submit(function() {
    $.ajax({
        type: "POST",
        url: "/url to send request to/",
        data:({ 
            key1:value1,
            key2:value2
            }),
        success: function(data) { 
            // do what you want after request
        } 
    });
   return false;  
});

添加“ return false”； 令人惊奇！ 它是如此简单，但确实有效！ 注意：“返回false；” 应该在ajax func括号关闭之后。 这对我有帮助。