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>

更新：关于event.preventDefault();

是的，你可以用它。但我个人不会建议在表单提交中。有时它不起作用。

Answer 2

你应该避免使用onclick="..."，因为它难以维护并且可能导致错误而是在click事件上添加一个监听器并停止默认操作（提交表单）

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

或者如果你正在使用jQuery（看起来像你）

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

即使在调用ajax之后页面也会刷新

2 个答案: