Ajax調用導致頁面重載

Question

我有一個react方法如下AJAX調用：

handleActivitySubmit: function handleActivitySubmit(activity, urlActivity, callbackMy) { 
    console.log("making query with activity: " + JSON.stringify(activity)); 
    $.ajax({ 
     url: urlActivity, 
     dataType: 'json', 
     type: 'GET', 
     data: activity, 
     success: function (data) { 
     callbackMy(Object.keys(data)); 
     }.bind(this), 
     error: function (xhr, status, err) { 
     console.error(urlActivity, status, err.toString()); 
     }.bind(this) 
    }); 
    }, 

每當調用不成功，整個頁面重新加載，所有的狀態都將丟失。

這是爲什麼？

Answer 1

您的HTML表格必須提交表格至action = url。這是表單處理的默認方式，即如果您單擊元素<input type="submit" .. />它將始終重新加載瀏覽器。您需要在您的處理程序中使用event.preventDefault()以防止默認操作。

獲取表單上單擊事件提交爲handleActivitySubmit即

handleActivitySubmit: function handleActivitySubmit(activity, urlActivity, callbackMy, event) { 
    event.preventDefault(); 
    // your remaining code 
    } 

最後一個參數