Hidden HTTP Post in Javascript - javascript

I'm trying to do an HTTP Post using Javascript.
I'm using the code reported here:
JavaScript post request like a form submit
and it works fine.
But I need to remain in the same page while the HTTP Post is sent.
How can I do?
Thx

AJAX?

do it inside of an iframe.
do it as an AJAX post

I know it seems to be the perpetual hammer (Because it is) but try using jQuery. then you can do a real simple jQuery post
http://api.jquery.com/jQuery.post/
$.ajax({
type: 'POST',
url: url,
data: data,
success: success
dataType: dataType
});
or
the shortest method if you don't need a return..
$.post("postTo.php", { name: $('#name').val(), data: $('#data').val(); } );

AJAX
$('.button').click(function() {
$.ajax({
type: "POST",
url: "whateveryourphpfileis.php",
data: { whatyouare: "sending" }
})
});
How to Call a PHP Function on the Click of a Button

Related

Laravel: I have some problem posting data with Ajax

Im new to using ajax and I have another post here about my code and they said it was correct.
However Im still facing issues
My code:
body[circle.id] = {id: currentid-1, x: event.offsetX, y: event.offsetY};
// Ajax
for(let i = 0;i < body.length;i++){
$.ajax({
url: 'get.php',
type: 'post',
data : {
data: body[i],
},
dataType: 'json',
});
}
The error:
[Error][1]
I cannot comment.
From the title I guess you are using Laravel.
I see you are hitting the file directly, but looks like you are showing only half the setup. In case Laravel.
What is the route setup?
And if the setup is like Route::get try Route::any.
How are you debugging the issue? Do you have any logs?
Can you check the logs of "web server"?
Either artisan serve or php -S should give at least some hints what your ajax is hitting.
According to the error image you have posted, The error says that the method only accepts the GET request but you are trying to make POST request in your AJAX method, Change your request type to GET like this,
$.ajax({
url: 'get.php',
type: 'get',
data : {
data: body[i],
},
dataType: 'json',
});
I fixed it.The problem was in url and routes

Open file upload dialog after Ajax post success

I have functionality in which it is required to open file upload dialog after Ajax call success event.
What I tried:
I tried applying below simple code in ajax success: and complete: event but it is not working.
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
data: { id: eoid },
contentType: 'application/json; charset=utf-8',
success: function (data) {
// some logic
$("#fileupload").click();
}
});
What is problem:
If I put simple button and try to execute above code, it is working fine and opening dialog - but it is not working in case of ajax post afterwards.
Any guesses or am I missing something?
Thank you.
The problem is at dataType: 'json' . You are loading html with your ajax request so you should change it to dataType: 'html' else in any other format it will not be considered success. Or you can delete this property as stated in Jquery doc that Jquery does default: Intelligent Guess (xml, json, script, or html).

Passing variables with URL not working quite right using PHP and ajax

I'm using AJAX to update a page every 5000 milliseconds. It works great but I have ran into one issue. When I try and get data that is in the URL using $_GET or $_POST it does not work. It instead returns a value of a 1. Here is some example code.
In main.php I have this:
$(document).ready(function worker() {
$.ajax({
url: 'Request.php',
type: 'POST',
success: function(data) {
$('#Live_data').html(data);
},
complete: function() {
setTimeout(worker, 5000);
}
});
})();
and when this is called it fires off the request.php. In request.php I have some code to grab what was added in the URL by a previous page but it dose not work. It goes something like this:
$value = $_get['test'];
This is supposed to return the value in the URL parameter test but it does not work.
Thanks!
You forgot to send data with the ajax query,
In this code, you can add GET data by append a query string to url value, or send POST data by setting data property of the request,
$.ajax({
url: 'Request.php?query=string&is=here',
type: 'POST',
data: {to: 'post', goes: 'here'},
success: function(data) {
$('#Live_data').html(data);
},
complete: function() {
setTimeout(worker, 5000);
}
});
see also https://api.jquery.com/jquery.post/#jQuery-post-settings
I've commented it as well but I'll post it as answer:
Change POST to GET in your jQuery AJAX request.
Use request.php instead of Request.php or the other way around.
Use $_GET instead of $_get. This variable is case sensitive.
Your not sending any data here. You can send the required data in Url or in Data Field.
url: 'Request.php?test=xyz',
or
data: data,

jquery ajax : what is the actual request sent?

What is the actual url sent to the server when I use the jquery ajax? And how do I access that value? For example, consider the following code:
<script>
$.ajax({
type: "POST",
dataType: "json",
url: "response.php",
data: {name:'Smith',age:10},
success: function(data) {
...
}
beforeSend: function(){
console.log(url);
// what do I put here to see what is being sent
// I am expecting to see "response.php?name=Smith&age=10"
}
...
So essentially what variable holds "response.php?name=Smith&age=10".
Thanks.
No variable holds
response.php?name=Smith&age=10
because you aren't sending the data as a query string. This would happen if you issued a GET request, but doesn't with a POST request.
You're sending the data in the request body of an HTTP post. The data is the data that you assigned to the data parameter. You don't need to round-trip it through jQuery's ajax methods. You've got it already. It's:
{name:'Smith',age:10}
does jQuery's interpretation of your data really matter?
The settings object is fully populated when beforeSend is called:
beforeSend: function(jqXHR, settings) {
console.log(settings.url);
console.log(settings.data);
}
$.ajax({ type: "POST", ... }) will log
response.php
name=Smith&age=10
and type: "GET"
response.php?name=Smith&age=10
undefined

Extract and read JSON Data from web API

What I'm working on is providing 1 line instant definitions of terms and perhaps one line answers to few logical questions. Suppose a user inputs "JavaScript" and JavaScript visits the url https://api.duckduckgo.com/?q=JavaScript&format=json&pretty=1, gets the item "Definition" (Look at the API link to understand, Definition is in the first line itself) and displays its value of Definition and alert the user with the required data.
Anyways my code currently is:
<html>
<head>
<title>Hi</title></head>
<body>
<input id="ddgAPI"><button>Search</button>
<div id="output"></div>
</body>
</html>
Please note that I've not put in the required JavaScript/jQuery code as I'm confused with this. Thank you :)
Because this is a cross-domain request you can only do this with a proxy or with JSONP. Fortunately DuckDuckGo supports JSONP, so you just need to ensure that you add a callback parameter to the URL request like:
https://api.duckduckgo.com/?q=JavaScript&format=json&pretty=1&callback=jsonp
... or use the appropriate jsonp parameter with jQuery's ajax method, something like:
$('#ddgAPI').on('keyup', function(e) {
if (e.which === '13') {
$.ajax({
type: 'GET',
url: 'https://api.duckduckgo.com/',
data: { q: $(this).val(), format: 'json', pretty: 1 },
jsonpCallback: 'jsonp',
dataType: 'jsonp'
}).then(function (data) {
console.log(data);
});
}
});
Use jQuery.ajax() to talk to the remote service. url should be https://api.duckduckgo.com. type should be GET. data should be:
var data = { q:'JavaScript', format:'json', pretty:1 };
jQuery will then compile everything into an AJAX request, send it to the server. Pass a function as success so you can do something with the result:
$.ajax({
url: "https://api.duckduckgo.com",
type: "GET",
data: { q:'JavaScript', format:'json', pretty:1 },
success: function(data) { $('#output').html(data); }
});

Categories

Resources