防止頁面重新加載並調用一個jQuery功能時點擊提交按鈕

form標籤的內容： -防止頁面重新加載並調用一個jQuery功能時點擊提交按鈕

<form method="post" action="<?php echo $_SERVER['PHP_SELF'] ;?>" >

按鈕標籤的內容： -

<input type="submit" id="submit_button" value="Submit">

jQuery的功能

$('#submit_button').click(function() 
      {   
       alert("button clicked"); 
       buildingVal = $("#building").val(); 
       levelVal = $("#level").val(); 
       data = 'building=' + buildingVal.val() + 'level=' + levelVal.val(); 
       $.ajax(
       { 

        url: "res.php", 
        type: "POST", 
        data: data,  
        success: function (data) { 
        } 
       }); 
       return false; 
      });

頁面正在重新加載，並且文本框和下拉菜單中的數據正在消失。

，但如果我只有這個代碼在jQuery的： -

$('#submit_button').click(function() 
      {   
       alert("button clicked"); 
return false; 
      });

那麼頁面不會重新加載和值保持不變。

請你能告訴我如何防止頁面重新加載？

另外，在Ajax調用我將調用頁面res.php將返回一個表，

將代碼是在

success: function (data) { 
        }

什麼請幫助...

編輯：

我傳遞數據到res.php頁面代碼

data = 'building=' + buildingVal.val() + 'level=' + levelVal.val();

，然後將其傳遞到在res.php頁

使用

$.ajax(
       { 

        url: "res.php", 
        type: "POST", 
        data: data,  
        success: function (data) { 
         $('#npc').html(data); 
        } 
       });

我如何提取從傳遞

我已經嘗試了單值的兩個值的頁面使用下面的代碼

$building = mysql_real_escape_string($_GET['building']); 
$level = mysql_real_escape_string($_GET['level']);

但它不工作...

來源

2012-08-31 debal

您在jQuery代碼中有錯誤：

錯誤：

buildingVal = $("#building").val(); 
levelVal = $("#level").val(); 
data = 'building=' + buildingVal.val() + 'level=' + levelVal.val();

解決方案：

buildingVal = $("#building"); 
levelVal = $("#level"); 
data = 'building=' + buildingVal.val() + '&level=' + levelVal.val();

完整代碼JS：

$('#submit_button').click(function() {   

    var 
     buildingVal = $("#building"), 
     levelVal = $("#level"), 
     data = 'building=' + buildingVal.val() + '&level=' + levelVal.val(); 


    $.ajax({ 
     'url': 'res.php', 
     'type': 'POST', 
     'data': data,  
     'success': function (data) { 
     } 
    }); 

    return false; 

});

編輯

如果你曾經打算使用這種形式通過AJAX發送數據時，最好的辦法就是取消事件「提交」的形式：

HTML：

<form id="myform" method="post" action="<?php echo $_SERVER['PHP_SELF'] ;?>" > 
... 
</form>

JS：

$('#myform').bind('submit', function(event) { 

    return false; 
}); 

$('#submit_button').bind('click', function() {   

    var 
     buildingVal = $("#building"), 
     levelVal = $("#level"), 
     data = 'building=' + buildingVal.val() + 'level=' + levelVal.val(); 


    $.ajax({ 
     'url': 'res.php', 
     'type': 'POST', 
     'data': data,  
     'success': function (data) { 
     } 
    }); 

});

來源

2012-08-31 11:48:27

這也幫我解決我的第一次問題的一部分。但第二部分仍然讓我困惑...... 我在成功中寫了什麼：函數打印我從res.php頁面回顯的表格。 – debal

@debal我不知道返回「res.php」，但是如果返回一個html，你應該用'$（...）替換你的html。 html（數據）'。如果您正在進行ajax調用，則必須替換要更新的數據。 –

你能否幫助我另一件事請..我已經在原始問題的編輯中提到它... – debal

最好的方法是首先不要使用submit按鈕。

<input type="button" id="myButton" value="Submit"> 


$('#myButton').on('click', function(){ 
    //do ajax 
});

來源

2012-08-31 11:42:52

您需要防止在點擊事件的默認行爲：

$('#submit_button').click(function (event) 
{ 
    event.preventDefault(); 
    alert("button clicked"); 
    return false; // Not truly necerssary 
});

http://api.jquery.com/event.preventDefault/

來源

2012-08-31 11:43:25

因此，爲了使提交按鈕不使用它的默認行爲提交你的頁面執行以下操作：

$('#submit_button').click(function (event) {   
       event.preventDefault(); 
       buildingVal = $("#building").val(); 
       levelVal = $("#level").val(); 
       data = 'building=' + buildingVal.val() + 'level=' + levelVal.val(); 
       $.ajax(
       { 

        url: "res.php", 
        type: "POST", 
        data: data,  
        success: function (data) { 
        } 
       });     
});

來源

2012-08-31 11:45:09

防止頁面重新加載並調用一個jQuery功能時點擊提交按鈕

回答

相關問題