Question

我想要一个网页，当按下按钮时，浏览器会导航到一个带有方法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。

请告知。

Answer 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>

Answer 2

发布请求将数据发布到：

http://localhost:8080/Login/＆＃34; + $（＆＃34;＃User＆＃34;）。val（）

这是在你的本地主机上，所以你应该在你的应用程序上有一个服务器端路由来捕获这个ajax post请求并发送回成功/消息。尝试传入＆＃34;数据＆＃34;参数进入你的成功函数并查看它的记录内容。

jQuery AJAX导航为POST

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

跨域

问题是什么？

2 个答案: