Страница становится обновленной даже после звонка ajax

Question

<section class="owner-sec sec1"> 
    <section class="owner-txt"> 
     <div class="first-name"> <?php echo $first_name ?></div> 
     <div class="last-name"> <?php echo $last_name ?></div> 
    </section> 
    <section class="bttn-save-owner bttn-save-owner1" style="display:none" > 
     <button id="savebtn1" onclick ="saveValue($(this),this.id)" class="save-bttn">Save Changes </button> 
    </section> 
</section> 

///////////////////////////////////// ///

Javascript код

function saveValue(target,id){ 
    var userId = <?php echo $user_id ?>; 
    var bttnId = id.split('savebtn'); 
    if(bttnId[1]==1){ 
     var bttnId=1; 
     var firstName = $('.first-name').text(); 
     var lastName = $('.last-name').text(); 
     $.ajax({ 
      url: "<?php echo $this->webroot;?>update.php", 
      dataType: "json", 
      async: false, 
      type: "POST", 
      data: { 
       'firstName': firstName, 
       'lastName': lastName, 
       'userId': userId, 
       'bttnId':bttnId 
      }, 
      success: function (data) { } 
     }); 
    } 

Answer 1

Просто добавьте return false; в конце saveValue() метода:

function saveValue(target,id){ 
    var userId = <?php echo $user_id ?>; 
    var bttnId = id.split('savebtn'); 
    if(bttnId[1]==1) { 
     var bttnId=1; 
     var firstName = $('.first-name').text(); 
     var lastName = $('.last-name').text(); 
     $.ajax({ 
      url: "<?php echo $this->webroot;?>update.php", 
      dataType: "json", 
      async: false, 
      type: "POST", 
      data: { 
       'firstName': firstName, 
       'lastName': lastName, 
       'userId': userId, 
       'bttnId':bttnId 
      }, 
      success: function (data) { } 
     }); 
    } 
    return false; 
} // also you need a } here. it's missing from your code 

Больше описание:button Элемент по умолчанию type настолько запутан в разных браузерах. Но в большинстве случаев он имеет значение submit. Кроме того, в вашем коде вы не установили атрибут type. Таким образом, в большинстве браузеров он будет иметь type="submit" (по умолчанию), и когда вы нажмете на него, он разместит форму, если только вы ее не предотвратите. Ну, возвращая false в конце метода вызова, это сделает.

Другой способ определения значения type для button:

<button type=""button" id="savebtn1" onclick="saveValue($(this),this.id)" class="save-bttn">Save Changes </button> 

UPDATE: О event.preventDefault();

Да, вы можете использовать это. Но я лично не буду рекомендовать это в форме подачи. Иногда это просто не работает.

Answer 2

Вам следует избегать onclick="...", потому что его сложнее поддерживать и может привести к ошибке.
Вместо добавления слушателя на событие щелчка и остановить действие по умолчанию (отправить форму)

document.getElementById("savebtn1").addEventListener("click", function(event){ 
    event.preventDefault(); 
    // do other stuff 
}); 

Или, если вы используете JQuery (и, кажется, как вы)

$('#savebtn1').click(function(e){ 
    e.preventDefault(); 
    // do other stuff 
});