API is not fetching data in console when it is placed in javascript?

Jj Thomsan

<html>
 <head>
 <title>Vehicle Smart Sample</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 </head>
 <body>
 <form id="vehicle-smart-sample-form">
 <label for="reg">Enter your reg</label>
 <input type="text" id="reg"/>
 <button type="submit">Search</button>
 </form>
 <div id="results">
 Results will appear here.
 </div>
 </body>
 <script type="text/javascript">
 var myAppId = "<REPLACE-WITH-YOUR-API-KEY!>";
 $(document).ready(function () {
 $("#vehicle-smart-sample-form").submit(function (e) {
 e.preventDefault();
 var reg = $("#reg").val();
 $.ajax({
 "async": true,
 "crossDomain": true,
 "url": "https://api.vehiclesmart.com/rest/vehicleData?reg=" + reg + "&isRefreshing=false&appid="+myAppId,
 "method": "GET",
 "headers": {
 "Content-Type": "application/text",
 "Accept": "application/json",
 "Cache-Control": "no-cache"
 }
 }).done(function (response) {
 console.log(response);
 if (response && response.Success) {
 $("#results").html(
 "<p>Make:" + response.VehicleDetails.Make + "</p>" +
 "<p>Model:" + response.VehicleDetails.Model + "</p>" +
 "<p>Taxed:" + response.VehicleDetails.Taxed + "</p>" +
 "<p>Motd:" + response.VehicleDetails.Motd + "</p>"
 );
 } else {
 $("#results").html(
 "<p>ERROR: "+response.ServiceMessage+"</p>"
 );
 }
 });
 });
 });
 </script>
</html>

Now the problem is that they have given me notice that NOTE - You should not put your API key in your HTML / JavaScript then where I put the API key to get the values which I need and I want to implement it in Wordpress do I need still PHP code to get the result

Olivier Cartier

You will not be able to hide this key in your Javascript code, the only way to do it is to wrap your request with PHP or any other Back-End technology.

Collected from the Internet

Please contact [email protected] to delete if infringement.