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()来阻止默认操作。

获取表单提交上的click事件作为handleActivitySubmit的最后一个参数，即

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

Ajax调用导致页面重新加载

1 个答案: