javascript - ajax 成功发布表单并更改页面

Question

我从客户那里得到了一个奇怪的要求，不知道如何解决它。

我通过ajax发送数据，成功后我想通过在那里显示消息来转到另一个页面，我使用GET方法处理这个问题，当ajax成功时然后使用

window.location.assign('Confirmation.aspx?d=data')

并切换到所需页面，但客户说不是 GET :D ，所以知道如何使用 post 来做到这一点。

我尝试过的:)

<form action="Confirmation.aspx" method="POST" id="mok">
    <input id="mail" type="hidden" value="data" name="m" />
</form>

$("#mok").submit();

但没有成功，页面没有改变，在同一页面上

Answer 1

我必须承认，我对提交过程中发生的第一部分仍然有点不清楚，但是，您可以将自己添加到 onsubmit 函数中，首先将数据发送到您的 ajax-target，然后您已完成请求(成功)将用户重定向到第二页。

// be sure to always return false, otherwise the default method would be used
function postForm(formElement) {
  if (typeof formElement === 'undefined' || !formElement) {
    // invalid call (expects at least the form element)
    return false;
  }
  // you could do some validation here, if you want, if it's unsuccesfull, show a message and return false
  // ...
  // check if the request hasn't been sent yet, if so, return false won't be resubmitted
  if (postForm.active) {
    return false;
  }
  postForm.active = true;

  // add a default option for the ajax call (in case no js is available, this option wouldn't be there
  // so you could redirect the page from aspx page)
  var data = {
      ajax: 1
    },
    hiddenElements = $('[type=hidden]'),
    i, 
      len, 
      dataKey, 
      dataValue, 
      dataItem,
      targetUrl = formElement.getAttribute('data-redirect');
  
  // get the hidden values to send that were added to the form
  for (i = 0, len = hiddenElements.length; i < len; i++) {
    dataItem = hiddenElements[i];
    dataKey = dataItem.name;
    dataValue = dataItem.value;

    if (typeof data[dataKey] !== 'undefined') {
      data[dataKey] = ',' + dataValue;
    } else {
      data[dataKey] = dataValue;
    }
  }

  // send the ajax request
  $.ajax({
    url: formElement.action,
    type: formElement.method || 'post',
    data: data,
    complete: function(response, state) {
      // free the form again (can be resubmitted at this time)
      postForm.active = false;
      if (state !== 'error') {
        // success, navigate to defined data-redirect
        window.location.assign(targetUrl);
      } else {
        // failed throw error, show message to user
        alert('Error occured during the request: ' + state);
      }
    },

  });
  // return false so that the form doesn't submit on its own
  return false;
}

// attach to all css class with name .submitter (allowing you to attach the mock submit request site wide)
$(function() {
  $('.submitter').on('click', function(e) {
    e.preventDefault();
    $('#mok').submit();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="[send-ajax-data-target-url]" method="post" id="mok" onsubmit="return postForm(this);" data-redirect="Confirmation.aspx">
  <input id="mail" type="hidden" value="data" name="m" />
  <button type="submit">Mock request</button>
</form>

<a href="#" class="submitter">Mock request</a>

上述代码的一个缺点是，如果没有 JavaScript，它就无法工作，但是，如果您的操作是Confirmation.aspx，并且您在 Request.Form 中没有看到“ajax=1”参数>，您可以从那里强制重定向，然后保留使用 js 提交表单的双重功能，并为可以支持它的客户端进行重定向，并为那些不支持它的客户端使用来自confirmation.aspx的重定向进行发布。

最后，我不确定您的请求是否仍然需要通过ajax发送(上面的代码使用表单中定义的操作(所以post/get))，但我认为我100%还是会发帖。