ajax在成功发布表单和更改页面上

ajax on success post form and change page

本文关键字：表单 成功 布表单 ajax      更新时间：2023-09-26

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

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

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

并切换到愿望页面，但客户说不GET:D，所以任何想法如何做与张贴。

我试过的：）

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

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

但没有成功，页面没有更改，我在同一页面

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

// 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）），但我认为我仍然会发布它。

相关文章：