How can I send data use post by javascript without form?

Question

I try like this :

window.location = '/admin/product?name='+name+'&category='+category+'&createdAt='+createdAt;

If the statement executed, the result url to be like this :

http://my-app.test/admin/product?name=chelsea&category=47&createdAt=2018-04-09

From the url, it can use get to get the value of parameter

But I want to change it use post. I don't want the value exist in the url

How can I do it without form tag by javascript?

Answer 1

jQuery.ajax({
    url: '/admin/product',
    type: "post",
    data: { name, category, createdAt },
    dataType: "json",
    success:function(response)
    {
        if(response.result)
        {

        }
        else
        {

        }
    }
});

Answer 2

fetch(URL, {
        method: 'POST',
        body: JSON.stringify({
            name: 'asif',
            email: 'asif@gmail.com'
        })
    }).then((response) => {
        return response.json();
    }).then((response) => {
        Console.log(response)
    }).catch((err) => {
        Console.log(err)
    });

Answer 3

When you put the data in URL you can either use $_GET or $_REQUEST to get the data. In case you want to get the data using the $_POST method, you need to pass is using the post method itself. In case you are using JQuery. I'll suggest you to go for $.ajax method to send data to the page you want. But you will not be redirected to that page with it.

If in case you want to send the data to the page and also want to get redirected to the page for further processing of data on the same page, you should choose for putting the data into $_SESSION variables and then redirecting to the page and using the $_SESSION variable over there.

I'll provide a simple example

AJAX to be used on your main page

$.ajax({
    method:'post',
    url:'createSessionVariable.php',
    data:{data1:'dataOne', data2:'dataTwo'},
    success:function(){
        window.location.href='pageYouWantToGetRedirected.php';
    }
});

The above will send data to a page createSessionVariable.php where you will create session variables using php and then on success you will be redirected to pageYouWantToGetRedirected.php

Code on createSessionVariable.php

$_SESSION['data1'] = $_GET['data1'];
$_SESSION['data2'] = $_GET['data2'];
echo "Done";

Now you can use the session variables on the page you want. It will help you passing the variable to the page and redirecting to the page as well without using a form tag.

But this is not considered a good way of writing code, as it can make your website vulnerable. Still you can use it.

Answer 4

See here, jQuery's ajax can POST and serialize your query parameters for you:

$.ajax({
  url: '/admin/product',
  data: { name, category, createdAt },
  type: "POST",

Answer 5

You can use Asynchrone Http request, commonly known as Ajax request. There a few way to do this : Using plain Javascript :

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == XMLHttpRequest.DONE) {   // XMLHttpRequest.DONE == 4
       if (xmlhttp.status == 200) {
           document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
       }
       else if (xmlhttp.status == 400) {
          alert('There was an error 400');
       }
       else {
           alert('something else other than 200 was returned');
       }
    }
};

xmlhttp.open("GET", "http://my-app.test/admin/product?name=chelsea&category=47&createdAt=2018-04-09", true);
xmlhttp.send();

Or using Ajax

$.ajax({
 url: "http://my-app.test/admin/product?name=chelsea&category=47&createdAt=2018-04-09",
 cache: false,
 success: function(html){
    $("#results").append(html);
 }
});

I have linked question with good explaination on how each method works.

Answer 6

@CertainPerformance's answer is better, but here's my answer.

Using the form tag in the background is always an option.

document.getElementById("name").value="Chelsea";
document.querySelectorAll("form")[0].submit();

<div style="display:none;">
<form action="product.php" method="post">
<input name="name" id="name">
<!--DO OTHER PARAMETERS-->
</form>
</div>

Answer 7

use javascript's XMLHttpRequest to send a POST request ( no jQuery )

var http = new XMLHttpRequest();

var url = "/admin/product";
var params = 'name='+name+'&category='+category+'&createdAt='+createdAt;
http.open("POST", url, true);

//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

http.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}
http.send(params);