jQuery AJAX 导航为 POST答案

【问题标题】：jQuery AJAX Navigate as POSTjQuery AJAX 导航为 POST
【发布时间】：2017-01-01 07:50:13
【问题描述】：

我想要一个网页，当按下按钮时，浏览器会使用 POST 方法导航到一个 URL，以及一些 xml 数据作为请求内容。响应也将是 xml。我的问题类似于 JQuery AJAX Post - pass variable and navigate URL ，但该问题的答案是 ajax POST，然后导航到 URL 的 GET，而我希望通过 POST 直接导航。

到目前为止我尝试了什么？

<html>
  <head>
    <title>Entry page</title>
    <script src="js/lib/jquery/jquery-3.1.0.min.js"></script>
<script>
function LogIn() {
  $.ajax({
    url: "http://localhost:8080/Login/" + $( "#User" ).val(),
    data: '<m:password xmlns:m="http://acme.com">' + $( "#Password" ).val()  + "</m:password>",
    method: 'POST',
    type: "POST",
    contentType: "application/xml",
    dataType: "xml",
    success :function()
      {
        alert('Ok');
        window.location="http://localhost:8080/Login/" + $( "#User" ).val();
      },
      error : function (xhr, ajaxOptions, thrownError){
       console.log(xhr.status);
       console.log(thrownError);
} });
}
</script>
  </head>
 <body>
<form>
  <label>User<input id="User" type="text" value="Sean" name="User"/></label>
  <label>Password<input id="Password" type="password" name="Password"/></label>
</form>

<button onclick="LogIn()">Try it</button>

</body>
</html>

跨域

我意识到这是跨域。服务器已配置为允许这样做，并且跨域位运行良好。

有什么问题？

$.ajax() 调用只是调用 POST，它不会导航到它。设置 window.location 没有帮助，因为这是一个无内容的 GET，而不是一个加载数据的 POST。

请指教。

【问题讨论】：

标签： jquery ajax post

【解决方案1】：

感谢https://formkeep.com/guides/submit-form-with-ajax解决

<html>
<head>
  <title>Entry page</title>
  <script src="js/lib/jquery/jquery-3.1.0.min.js"></script>

  <script>
// Thanks to https://formkeep.com/guides/submit-form-with-ajax
$(function() {
  $('#form3').submit(function(event) {
    var formEl = $(this);
    var submitButton = $('input[type=submit]', formEl);
    var url = "http://localhost:8080/Login/" + $( "#User" ).val();
    var datum = '<m:password xmlns:m="http://acme.com">' + $( "#Password" ).val()  + "</m:password>";

    $('#x').val(datum);
    $("#form3").attr("action", url);

    $.ajax({
      type: 'POST',
      url: url,
      data: datum,
      dataType: "xml",
      contentType: "application/xml",
      beforeSend: function() {
        submitButton.prop('disabled', 'disabled');
      },
      error   :function (xhr, ajaxOptions, thrownError)
        {
        console.log(xhr.status);
        console.log(thrownError);
        },
      done: function() {
        submitButton.prop('disabled', false);
      }
      });
  });
});
  </script>
</head>



<body>

<form id="form3" action="set-dynamically" method="POST">
  <label>User<input id="User" type="text" value="Sean" name="User"/></label>
  <label>Password<input id="Password" type="password" name="Password"/></label>
  <textarea style="display:none" name="x" id="x">
    <m:password xmlns:m="http://acme.com">Password</m:password>
  </textarea>
  <input value="Submit" type="submit">
</form>


</body>
</html>

【讨论】：

它导航但我收到空值。有什么线索吗？

【解决方案2】：

发布请求将数据发布到：

http://localhost:8080/Login/" + $( "#User" ).val()

这是在您的本地主机上，因此您的应用程序上应该有一个服务器端路由来捕获此 ajax 发布请求并发送回成功/消息。尝试将“数据”参数传递给您的成功函数并查看它记录的内容。

【讨论】：

我已经做到了。服务器应用程序返回正确的响应，我可以在浏览器控制台或 javascript 变量中成功捕获它。问题是浏览器是 just 发布到这个 url，没有导航到它。
我希望浏览器导航到 http://localhost:8080/Login/Sean 作为带有有效负载 xml 数据的 POST。
那么你需要在原始ajax成功时再做一次get请求。然后你的路线应该呈现页面。或者您可以尝试在您的发布路线上渲染页面，但我从未尝试过。