I want a web page, which when a button is pressed, the browser navigates to a URL with method POST, and some xml data as the request content. The response will also be xml. My question is similar to JQuery AJAX Post - pass variable and navigate URL , but the answers to that question do an ajax POST, followed by navigation to a GET of the URL, whereas I want a direct navigation via 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>
I realise that this is cross domain. The server has been configured to allow this, and the cross-domain bit works perfectly well.
The $.ajax() call simply invokes the POST, it doesn't navigate to it. Setting the window.location doesn't help, because this is a content-less GET, not a data-loaded POST.
Please advise.
The post request is posting the data to:
http://localhost:8080/Login/" + $( "#User" ).val()
This is on you local host so you should have a server side route on you application to catch this ajax post request and send a success/message back back. Try passing in a "data" parameter into your success function and see what it logs.
Solved thanks to 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>