在Ajax中沒有頁面刷新的更新視圖

Question

我有下面的代碼，它在單擊按鈕時運行。

$.ajax({ 
     type: "POST", 
     url: base_url+"/controller/method", 
     data: {val: value}, 
     success: function(data){ 
      data = jQuery.parseJSON(data); 
      if(data.status === true){ 
       show_notify_message("Success",data.msg,'success'); 
      } else { 
        show_notify_message("Error",data.msg,'error'); 
      } 
     } 
    }); 

HTML代碼：

<button class='btn btn-xs alert-success' onclick='method(1)'><font color='black'>Take</font></button> 

一旦進行改變，整個頁面刷新和更新的值在視圖中看到。

如何在不刷新整個頁面的情況下執行相同的操作？

Answer 1

如果使用<button>元素，設置它的類型爲「按鈕」是這樣的：

<button type="button">Click Me</button> 

由於某種原因，默認類型是「提交」

Answer 2

嘗試這樣 HTML代碼

<button class='btn btn-xs alert-success' data-method='1'><font color='black'>Take</font></button> 

jQuery腳本

$(document).ready(function(){ 
    $("[data-method]").click(function(event){ 
    event.preventDefault(); 
    //value from the button 
    value=$(this).data("method"); 
    // ajax call 
    }); 
});