We Keep Coding

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

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?

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

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)
});

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.

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.

#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>

See here, jQuery's ajax can POST and serialize your query parameters for you:
$.ajax({
url: '/admin/product',
data: { name, category, createdAt },
type: "POST",

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);

XMLHttpRequest different response vs. jQuery AJAX

I've made three requests to the same URL which should return the same response- but guess what, they don't.
First, the working one is with jQuery:
$.ajax({
dataType: "json",
url: "https://www.speedrun.com/api/v1/games?name=mkdd&callback=?",
type: "GET",
success: function(data){
console.log("Succes with AJAX - ?", data);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The second one is also with jQuery, but I changed the callback=? to callback=foo. I really can't figure out why this isn't working.
$.ajax({
dataType: "json",
url: "https://www.speedrun.com/api/v1/games?name=mkdd&callback=foo",
type: "GET",
success: function(data){
console.log("Succes with AJAX - foo", data);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Third one is just plain JavaScript - which I was planning on using. It's not working with whatever callback I'm using.
var request = new XMLHttpRequest();
request.open('GET', "https://www.speedrun.com/api/v1/games?name=mkdd&callback=?", true);
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
var resp = this.response;
console.log("Succes with JS", resp);
}
};
request.setRequestHeader('Content-Type', 'application/json');
request.send();
Can anybody help me with this problem? Am I missing something in my XMLHttpRequest? Why does the callback=? vs callback=foo matter so much?
Fiddle: https://jsfiddle.net/bobtrol/2okpebvn/2/

get html result of php in html file

This code will send request to post parameters to php file:
var param = //some parameters;
var url = file.php;
xhttp.open("POST", url, true);
xhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhttp.send(params);
I got the response but the php file produce some output like <td><tr>.....
How to get this result of php in some div of my html?
Thanks,

You use onreadystatechange to get the response:
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
$('#mydiv').html(xhttp.responseText);
}
};

XHR is pretty complicated without using a Framework. Just use jQuery it will make this 1000x easier.
$.ajax({
url: "myfile.php",
type: "POST",
data: {
/* Params */
},
success: function(response){
/* Use your response here */
}
});
http://api.jquery.com/jquery.ajax/

Convert jQuery to JavaScript code equivalent

I know how to use jQuery well, but I don't know so much pure JavaScript.
This is my jQuery code:
$(document).ready(function() {
$.get('http://jsonip.com/', function(r){
var ip_address = r.ip;
my_function(ip_address);
});
function my_function(ip_address){
var url = "Url_to my server hosted on a different domain";
var data = {number:"1286", ip: ip_address};
$.ajax({
url: url,
type: "POST",
dataType: 'json',
crossDomain: true,
data: {data: data},
success: function (data) {console.log(JSON.stringify(data));},
error: function (xhr, error) {console.log("There was an error and data was not posted.");}});}
});
What it does: it is pasted in any website, then it picks any visitors ip address and send that as JSON to my server as variable data.
Problem: the code is working perfectly okay in some sites but not all the sites due to jQuery dependency. And I want to remove this and use pure JavaScript.
I am getting great answers but CORS is not working, there failing them. I am using different domains since the site we are sending data to is hosted on another server.

As mentioned in my commment above, you do not need the first ajax request as you can get this information from the request headers (PHP Example below) from your AJAX request.
To make sure that your website(s) have jQuery loaded you can run a check in your script and load it in dynamically. Using some code from this answer. See below for an example:
// Anonymous "self-invoking" function
(function() {
// Load the script
var script = document.createElement("SCRIPT");
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
script.type = 'text/javascript';
document.getElementsByTagName("head")[0].appendChild(script);
// Poll for jQuery to come into existance
var checkReady = function(callback) {
if (window.jQuery) {
callback(jQuery);
}
else {
window.setTimeout(function() { checkReady(callback); }, 100);
}
};
// Start polling...
checkReady(function($) {
var url = "Url_to my server hosted on a different domain";
var data = {number:"1286", ip: ip_address};
$.ajax({
url: url,
type: "POST",
dataType: 'json',
crossDomain: true,
data: {data: data},
success: function (data) {console.log(JSON.stringify(data));},
error: function (xhr, error) {console.log("There was an error and data was not posted.");
});
});
})();
To get the IP Address from your ajax request: (PHP) Source
if (!empty($_SERVER['HTTP_CLIENT_IP'])) {
$ip = $_SERVER['HTTP_CLIENT_IP'];
} elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
$ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
} else {
$ip = $_SERVER['REMOTE_ADDR'];
}

The annoying part is that you need to do a cross-domain POST to send your data. There's a W3C standard for this called Cross-Origin Resource Sharing (CORS). Check out this tutorial for more info.
You'll want to put this at the bottom of the page. Different browsers handle ready state change events differently, so let's just avoid them.
<script>
// Once the JSONP script loads, it will call this function with its payload.
function getip(ipJson) {
var method = 'POST';
var url = 'URL of your server';
// The XMLHTTPRequest is the standard way to do AJAX. Try to use CORS.
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr) {
// XHR for Chrome/Firefox/Opera/Safari.
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined") {
// XDomainRequest for IE.
xhr = new XDomainRequest();
xhr.open(method, url);
}
// Create your request body. It has to be form encoded. I'm not sure
// where you get `number` from, so I've hard-coded it.
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send('number=1286&ip=' + ipJson.ip);
}
</script>
<!-- Get the IP using JSONP so we can skip implementing that. -->
<script type="application/javascript" src="http://www.telize.com/jsonip?callback=getip"></script>
This probably only works in modern browsers, but it should work in most modern browsers.

Replace $.ready(function...) with document.addEventListener('DOMContentLoaded', function..., false).
Replace $.ajax with XMLHttpRequest:
var xhr = new XMLHttpRequest();
//var data = {number:"1286", ip: ip_address};
var data = new FormData();
data.append("number", "1286");
data.append("ip", ip_address); // As stated by Scriptable in the question comments, your server should be able to get it from the request headers.
xhr.onload = function() { console.log(JSON.stringify(this.response)); };
xhr.onerror = function() { console.log("There was an error and data was not posted.") };
xhr.open("POST", "URL to your server");
xhr.send(data);

How to pass a javascript variable to php without opening a new page

I have a user enter a value in a form and onClick() activates a function that takes the URL the user pasted and cuts it down (using an algorithm I made, but that is irrelevant). I end up with a string of 11 characters and im not sure how to get this to a php page that submits it to my database. The way i am doing it now takes the browser to a new page and i want the user to stay on the same page.
function findvideoid(){
window.location.href = 'submitvid.php?videoID=' + videoID;
}

Pure JavaScript solution (recommended):
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyStatus == 4) { // finished
if (xhr.status == 200) { // 200 HTTP code returned by server
}
else { // error
}
}
};
xhr.open("GET", "your-script.php?videoID=" + encodeURIComponent(videoID));
xhr.send(null);
jQuery solution (recommended if you already use jQuery in your project or if you want to try it out):
// PHP script can access $_GET['videoID']
jQuery.get("your-script.php?videoID=" + encodeURIComponent(videoID));
// PHP script can access $_POST['videoID']
jQuery.post("your-script.php", {videoID: videoID});
jQuery.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )
jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

What about masking the actual ajax call with the loading of an external html resource?
If no real callback is expected, you could inject an iframe into the document pointing to the specified url and then remove it from the document.
Here's an example of accessing your backend's api url masked by loading an image:
function findvideoid(id, callback){
var img = new Image();
img.onload = callback;
img.src = apiUrl + '?videoId=' + encodeURIComponent(id)
+ '&antiCache=' + new Date().getTime();
}
No ajax. No other libs. Google does it for it's analytics. Why shouldn't you?

Use AJAX:
function findvideoid()
{
var html = $.ajax({
type: "POST",
url: "submitvid.php",
data: "videoID=" + videoID,
async: false
}).responseText;
if(html == "success")
{
// Uncomment the following line in your application
//return true;
}
else
{
return false;
}
}

You can do this easily in jQuery
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});