I've been looking around for an explanation on how to do this for a while but haven't found a decent explanation yet, so apologies if this is a repeat.
I don't have any problem retrieving JSON using GET but I'm confused as to how to use POST to send JSON and have it interpreted at the far end by a PHP script
I'm trying to do this on localhost for now.
Form is as follows:
<div class="row">
<div class="col-sm-2 spacer"> </div>
<div class="col-sm-8 topSpaceNeeded"><h4>Select Currencies to Exchange</h4></div>
<div class="col-sm-2 spacer"> </div>
</div>
<div class="row">
<div class="col-sm-1"> </div>
<div class="col-sm-10">
<form id="formSendDataWithAjax" method="POST" action="./postedJsonData">
<div id="formSection1">
<div class="row">
<div class="col-sm-12"> </div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="userId">User ID</label>
<select class="form-control" id="userId" name="userId">
<option value="123456">123456</option>
<option value="654321">654321</option>
<option value="134256">134256</option>
<option value="652431">652431</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="originatingCountry" id="countryLabel">Country of Origin</label>
<select class="form-control" id="originatingCountry" name="originatingCountry">
<option value="IE">IRELAND</option>
<option value="EN">ENGLAND</option>
<option value="FR">FRANCE</option>
<option value="PL">POLAND</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="currencyFrom">Base Currency</label>
<select class="form-control" id="currencyFrom" name="currencyFrom" >
<option value="AUD">AUD</OPTION>
<option value="CAD">CAD</OPTION>
<option value="CHF">CHF</OPTION>
<option value="CZK">CZK</OPTION>
<option value="DKK">DKK</OPTION>
<option value="EUR" SELECTED>EUR</OPTION>
<option value="GBP">GBP</OPTION>
<option value="HKD">HKD</OPTION>
<option value="HUF">HUF</OPTION>
<option value="NOK">NOK</OPTION>
<option value="NZD">NZD</OPTION>
<option value="PLN">PLN</OPTION>
<option value="SEK">SEK</OPTION>
<option value="USD">USD</OPTION>
<option value="ZAR">ZAR</OPTION>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="currencyTo">Buy Currency</label>
<select class="form-control" id="currencyTo" name="currencyTo">
<option value="AUD">AUD</OPTION>
<option value="CAD">CAD</OPTION>
<option value="CHF">CHF</OPTION>
<option value="DKK">DKK</OPTION>
<option value="EUR" SELECTED>EUR</OPTION>
<option value="GBP">GBP</OPTION>
<option value="HKD">HKD</OPTION>
<option value="HUF">HUF</OPTION>
<option value="NOK">NOK</OPTION>
<option value="NZD">NZD</OPTION>
<option value="PLN">PLN</OPTION>
<option value="SEK">SEK</OPTION>
<option value="USD">USD</OPTION>
<option value="ZAR">ZAR</OPTION>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12"> </div>
</div>
</div>
<div id="formSection2">
<div class="row">
<div class="col-sm-12"> </div>
</div>
<div class="row">
<div class="col-sm-4"> </div>
<div class="col-sm-4">
<div class="form-group">
<label for="rate" id="rateLabel"> </label>
<input type="hidden" id="rate" name="rate" value="" >
</div>
</div>
<div class="col-sm-4"> </div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="amountSell">You Sell:</label>
<input type="number" class="form-control" step="0.10" id="amountSell" name="amountSell" value="1.00" >
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="amountBuy">You Buy:</label>
<input type="number" class="form-control" step="0.01" id="amountBuy" name="amountBuy" value="1.00" >
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12"> </div>
</div>
<div class="row">
<div class="col-sm-4"> </div>
<div class="col-sm-4">
<input type="submit" id="transfer" class="btn btn-primary btn-block" id="transfer" name="transfer" value="TRANSFER NOW">
</div>
<div class="col-sm-4"> </div>
</div>
</div>
</form>
</div>
<div class="col-sm-1"> </div>
</div>
I know it's probably easier to use JQuery, but Javascript is what I know so I'd like to stick with that if possible.
The Javascript is as follows:
document.getElementById('formSendDataWithAjax').onsubmit =submitDataWithAjax;
function submitDataWithAjax(e)
{
// intercept form submission by preventing the script from following the url of the form
e.preventDefault();
var f = e.target,
formData= new FormData(f),
xhr = new XMLHttpRequest();
xhr.open("POST", f.action);
xhr.setRequestHeader("Content-Type","application/json; charset=utf-8");
xhr.send(formData);
}
What I believe this script should do is prevent the postedJsonData page from loading when the form is submitted. Instead, the data is converted to JSON and should then be sent via AJAX to the postedJsonData PHP script
If this is correct, how do I get postedJsonData script to listen for the data?
Is it enough to do this to extract it to an array?
$dataArr = file_get_contents("php://input");
jQuery is much easier, I'd highly recommend it.
To use jQuery, just include this at the top of your page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Then, to do AJAX/JSON/PHP requests, replace what you currently have in your Javascript file with:
$(document).ready(function() {
$("#formSendDataWithAjax").submit(function() { //Whenever form with ID="formSendDataWithAjax" is submitted
$.ajax({ //Make AJAX POST call
type: "POST", //POST, instead of GET
url: "postedJsonData.php", //Location of PHP script
dataType: "JSON", //JSON
data: {
userid: $("#userId").val(), //These values will be JSON-encoded automatically
country: $("#originatingCountry").val(), //Magically JSON-encoded
etc.
}
}).done(function(returnValue) { //returnValue could be any JSON string: "{ "result" : "success" }, { "result" : "error" }, etc.
alert("Your PHP script returned this value: "+returnValue);
});
}
return false;
}
Then in your PHP script, simply calling $_POST['userid'] or $_POST['country'] will give you the value POSTed by the AJAX call. E.g.
<?php
$userid = (int) $_POST['userid'];
$country = $_POST['country'];
//Do stuff
?>