Pass input value to URL API

Asked

Viewed 369 times

0

Pass INPUT value to URL API

I have an account on an external IP system that has an API that goes through the URL.

For example, if I want to authorize an IP, just type in the browser...

https://MEUSITE.com/proxy/dashboard/api/ips/add/usuarioAPI/SenhaAPI/123.123.123.123

...that it will add the Ip 123... in the database. Because, the user and password are already in the URL.

So I need to create a form like the one below to inform this IP and that when sending it run the URL.

Below is the form:

<form method="get" action="https://MEUSITE.com/proxy/dashboard/api/ips/add/usuarioAPI/SenhaAPI/{IP}">
    <p>Adicionar IP: <input type="text" name="IPadicionar"></p>
    <p><input type="submit" value="Enviar"></p>
</form>

I tried the default way, which was to put the variable at the end of the url - /?Ipadicionar - but it didn’t work. Because, the url has to have only the IP at the end and it can’t have ? or =.

So my question is how do I, when clicking submit, pass only the IP typed in the input to the end of the URL?

1 answer

1


You need consume the API using JS, because HTML will not automatically modify data after the page has already been printed, and your API URL does not accept query (?something=123).

For this there are two solutions, starting with the simplest.

1. use JS to modify your action, when entering data into input:

<form id="formAPI" method="get" action="">
    <p>Adicionar IP: <input type="text" id="ipAdd" onchange="ipChange(this)"></p>
    <p><input type="submit" value="Enviar"></p>
</form>
<script>
    function ipChange(elementoIp){
    let urlApi = 'https://MEUSITE.com/proxy/dashboard/api/ips/add/usuarioAPI/SenhaAPI/';
    let elementoForm = document.querySelector('#formAPI');
    elementoForm.action = urlApi + elementoIp.value;
    }
</script>
//Aqui removi o name do seu input para que não fosse adcionado ?campo=algo na URL

The attribute onchangein its input causes the function to be executed when the field is modified and lose focus (by clicking outside the field, or in another element like the button Enviar), at that point the function modifies the action of your FORM.

Obs: this = element that triggered the function, in this case the input.

The second way is more recommended, so the page will not be redirected when sending the request:

2. use JS to consume the API directly:

<div id="minhaAPI">
    <p>Adicionar IP: <input type="text" id="ipAdd"></p>
    <p><input type="submit" onclick="ipChange()" value="Enviar"></p>
</div>
<script>
    function ipChange(){
    let urlApi = 'https://MEUSITE.com/proxy/dashboard/api/ips/add/usuarioAPI/SenhaAPI/';
    let elementoIp = document.querySelector('#ipAdd');
    let urlAdd = urlApi + elementoIp.value;

    fetch(urlAdd).then(function(response) {
      if(response.ok) {
        alert('IP adicionado!');
      } else {
        alert('Houve um erro ao conectar ao servidor!');
      }
    })
    .catch(function(error) {
      alert('Houve um erro na requisição: ' + error.message);
    });
    }
</script>
  • Thank you so much for returning. It adds the IP perfectly however returns the error ( error in request:failed to fetch )

  • If the API URL is on your domain, make sure your host is configured to allow JS requests and if the protocol in the URL (http / https) is the same on the JS page and the API URL, also check the request response code, you can use the Inspector / DevTools (F12 key or control shift + i) from the browser, in the Network tab to check. If the API is not on your domain check whether JS requests from other domains are allowed (Cross Origin Resource Sharing), if it is not necessary to create an own PHP that requests with CURL for example to be called by your JS.

  • As an option to JS Fetch, you can also use Xmlhttprequest: Exmplo https://www.w3schools.com/js/js_ajax_http.asp Details: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

  • These two options you have passed, ( Zimaldo Junior ) however because it is <script> if the user sees the source code of the page, he will be able to view the user and password of the api that is passed in the URL. would have some alternative to hide?

  • To hide this information you can create a PHP script to make the main request via CURL, and in JS instead of calling the API endpoint directly, make a request to your PHP and send the IP that will be added to the permission list. Here’s how to use CURL in PHP: https://imasters.com.br/back-end/curl-com-php-para-apis-restfull

Browser other questions tagged

You are not signed in. Login or sign up in order to post.