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 
    } 

最后一个参数