Develop Reference

Unable to pass formData with other parameters in jQuery

I am trying to pass formData along with other parameters to a PHP script.
Using the $.post method, I was getting an 'Illegal Invocation' error. So I abandoned the $.post method and went to $.ajax method.
As follows:
$('#uploadBtn').on('click', function()
{
var formData = new FormData($('#uploadfile')[0]); // the form data is uploaded file
var booking = $('#bookingNum').val();
var partner = $('#partnerCode').val();
var parameters =
{
formData:formData,
booking:booking,
partner:partner
}
$.ajax({
url: 'process/customer.php',
data: parameters, // <- this may be wrong
async: false,
contentType: false,
processData: false,
cache: false,
type: 'POST',
success: function(data)
{
console.log(data);
},
error: function(jqHHR, textStatus, errorThrown)
{
console.log('fail: ' + errorThrown);
}
});
});
On the PHP side, I'm trying to get the parameters object like so:
<?php
if(isset($_POST['parameters']))
{
echo "Hello";
$value = $_POST['parameters'];
// I can get the other 2 parameters like this
$company = htmlspecialchars(trim($value['booking']));
$partner = htmlspecialchars(trim($value['partner']));
// not sure how to get the uploaded file information
}
?>
Basically, I am uploading a file to be saved to a directory. But the problem is, I cannot send anything over to the PHP side. I am getting this warning:
"jquery.js:2 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/."
I need to be able to send the 'parameters' object over to the PHP script, then access it for processing.
How can I achieve this using the $.ajax method? Then how do I access the formData once on the PHP side?

The parameters is the object you are POSTing. the key value pairs will be based on it's properties. Try accessing them like $_POST['formData'] and $_POST['booking'].
Also... please rework your code to remove the async:false ... TBH this should never have been put into jQuery and is absolutely terrible. Don't feel bad, it's the first thing every newcomer tries when they first start using ajax, myself included. You're going to cause the UI thread to hang for the duration, preventing all user interaction during the call.
EDIT
I didn't realize you are trying to post a file at first, so this is not a complete answer as I don't think you are accessing it correctly. But The important part of this answer is that there is no parameters index of $_POST (which is why not even your echo "hello" is coming back).
if you POST an object that looks like
{
key1 : "value1",
key2 : "value2"
}
they will come through to php as
$_POST['key1'];//"value1";
$_POST['key2'];//"value2";
important to note, files posted to the server are typically found in the $_FILES superglobal. (don't know if AJAX changes that, but I imagine not)
EDIT2
Combining the two... this is the general idea. Make your html + JS look like...
$('#form').on('submit', function()
{
var form_data = new FormData();
form_data.append("file", document.getElementById('fileInput').files[0]);
var booking = $('#bookingNum').val();
var partner = $('#partnerCode').val();
form_data.append("booking ",booking);
form_data.append("partner",partner);
$.ajax({
url: 'process/customer.php',
method:"POST",
data: form_data,
contentType: false,
cache: false,
processData: false,
success: function(data)
{
console.log(data);
},
error: function(jqHHR, textStatus, errorThrown)
{
console.log('fail: ' + errorThrown);
}
});
return false;//prevent default form submission
});
<form id='form'>
<input type='file' id='fileInput' />
<label for='bookingNum'>Booking Num: </label>
<input type='text' id='bookingNum' name='bookingNum' />
<label for='partnerCode'>Partner Code:</label>
<input type='text' id='partnerCode' name='partnerCode' />
<button id='uploadBtn'>Submit</button>
</form>
and try it with your php code like
<?php
if($_POST['bookingNum']){
var_dump($_POST['bookingNum']);
}
if($_POST['partnerCode']){
var_dump($_POST['partnerCode']);
}
if($_FILES['file']){
var_dump($_FILES['file']);
}

$('#uploadBtn').on('click', function()
{
var form_data = new FormData();
form_data.append("file", document.getElementById('ID').files[0]);
var booking = $('#bookingNum').val();
var partner = $('#partnerCode').val();
form_data.append("booking ",booking);
form_data.append("partner",partner);
$.ajax({
url: 'process/customer.php',
method:"POST",
data: form_data,
contentType: false,
cache: false,
processData: false,
success: function(data)
{
console.log(data);
},
error: function(jqHHR, textStatus, errorThrown)
{
console.log('fail: ' + errorThrown);
}
});
});

How can I get post parameters on ajax request in Symfony 3

I have an ajax request working fine. My problem is I do not really know how to use correctly my controller to get the datas in the format I would like.
I would like to use this kind of method:
$request->request->get('pseudo'); // will return "bob"
Here is my controller code:
public function mainPlayAction(Request $request)
{
if ($request->isXmlHttpRequest())
{
$allContent = $request->getContent(); // will return a string with this format "selectedBalls=34&selectedStars=11"
$selectedBalls = $request->request->get('selectedBalls'); // will return null
$selectedstars= $request->request->get('selectedStars'); // will return null
$all = $request->request->all(); // will return Array[0]
$response = [
'allContent' => $allContent,
'selectedballs' => $selectedBalls,
'selectedStars' => $selectedStars,
'all' => $all,
'success' => true,
"status" => 100
];
return $this->json($response);
}
}
Here is my ajax code
$.ajax({
url: url,
dataType: "json",
contentType: "application/json; charset=utf-8",
type: "POST",
data: {
'selectedballs': selectedBalls,
'selectedStars': selectedStars,
'countGames': countGames
},
success: function (response) {
window.console.log(response);
},
})

You simply need to call ->get() on Request object to get the data passwed along with AJAX Request.
Like this,
$selectedballs=$request->get('selectedballs');
$selectedStars=$request->get('selectedStars');
$countGames=$request->get('countGames');

I found a good answer.
I deleted this line of code from my ajax request
contentType: "application/json; charset=utf-8"
And now I can retrieve my datas using
$request->get('selectedBalls');

Problema sending json file from javascript to laravel controller

im having problems trying to send a JSON file from javascript to Laravel controller, when i press my button from the view i didnt get any response.
This is my code, i appreciate any help or suggestion, thnks.
This is the the JS code:
var horarios= { Lunes: arrLunes, Martes: arrMartes, Miercoles: arrMiercoles, Jueves:arrJueves, Viernes:arrViernes};
var schedule = JSON.stringify(horarios);
//console.log(schedule);
var varurl= 'http://localhost/registerEntrance';
$.ajax({
type: "POST",
url: varurl,
data: {json:schedule},
dataType:'json',
success: function(res) {
var message = res.mesg;
if (message) {
$('.flash').html(message).fadeIn(300).delay(250).fadeOut(300);
};
}
});
When i press my button, doesnt happend anything. The next id the route and the controller code, the JSON file not arrive there yet.
Route::post('registerEntrance', array('as' => 'registerEntrance','uses' => 'CursoController#regisEnt'));
public function regisEnt(){
if(Request::ajax()) {
$data = Input::all();
return $data;
}
}
Thnks for any help.

What are you using to debug your requests? Have you checked your storage/logs/framework/laravel.log (if your log is HUGE you can always delete it and re-run your request)
Working with AJAX can get tricky when it comes to debugging your requests.
My recommendation would be
Open up your browser Inspector, and monitor Network Requests
Analyze the request you're sending.
Set debug to true under config/app.php to actually see a debug
Hope this helps!

I get resolv my problem, i post it if someone is getting a similar inconvenience.
In my view i wasnt create a form.
{!! Form::open(['route' => ['route'], 'method' => 'POST', 'id' =>'form-name']) !!}
{!! Form::close() !!}
This part create a implicit token that is necesary in laravel for use ajax method.
My code JS was modified for getting and send the csrf token.
var form = $('#form-name');
var myurl = form.attr('action');
crsfToken = document.getElementsByName("_token")[0].value;
$.ajax({
url: myurl,
type: 'POST',
data: {data:data},
datatype: 'JSON',
headers: {
"X-CSRF-TOKEN": crsfToken
},
success: function(text){
bootbox.dialog({
closeButton: false,
message: "Ok!",
title: "Perfect!!",
},
error: function(data){
console.log("Error");
}
});
With this change i get arrive to my controller.
Anyway Thnks.

ajax post call not working

I am trying to call MVC Controller from jquery but not able to place the call. Is there any problem in below code
Please figure out that if any problem and also I am not getting any error.
url="http://localhost:49917/Account/SaveAddress"
this.SaveAddress = function (url, addressData)
{
$.ajax({
type: "POST",
url: url,
dataType: "json",
data: JSON.stringify(addressData),
contentType: 'application/json; charset=utf-8',
success: function (responseDetail) {
},
error:function(e)
{
},
});
return 0;
};
public async Task<ActionResult> SaveAddress(AddressListViewModel addressListVM)
{
bool response;
string message;
if (addressListVM.ID <= 0)
{
response = await Task.Run(() => AccountManager.Instance().AddAddress(addressListVM));
message = response ? "New address added successfully." : "Failed to add new address.";
}
else
{
response = await Task.Run(() => AccountManager.Instance().UpdateAddress(addressListVM));
message = response ? "Selected address updated successfully." : "Failed to update selected address.";
}
ModelState.Clear();
return Json(new { responsestatus = response, message = message }, JsonRequestBehavior.AllowGet);
//return PartialView("_AddressDetail", BuildAddressListEntity(
// UserManager.FindById(User.Identity.GetUserId()), response, message, addressListVM.ID, true));
}

Yes, you are missing a closing bracket at the end of the this.saveaddress function
this.SaveAddress = function (url, addressData)
{
$.ajax({
type: "POST",
url: url,
dataType: "json",
data: JSON.stringify(addressData),
contentType: 'application/json; charset=utf-8',
success: function (responseDetail) {
},
error:function(e)
{
},
});
after all of that .. you need one more closing bracket:
}
;)

What does the console display? If you are using Chrome then right-click, choose Inspect, and find the Console tab. If you are calling the AJAX function correctly then something must be displayed in this Console tab which will probably lead you in the right direction better than I could with the information I have.

Put a breakpoint in your success and error functions. If it hits the error function then the issue is either that the controller action was not found or that the data is not valid json (either the post data or return data). You should add the errorThrown parameter to the error function so you can easily see what the issue is. You also do not need to stringify the data if it is already valid json, but if it is a string representing json data, you will need to use json.parse (sorry for the incorrect case).

JQuery $.ajax() post - data in a java servlet

I want to send data to a java servlet for processing. The data will have a variable length and be in key/value pairs:
{ A1984 : 1, A9873 : 5, A1674 : 2, A8724 : 1, A3574 : 3, A1165 : 5 }
The data doesn't need to be formated this way, it is just how I have it now.
var saveData = $.ajax({
type: "POST",
url: "someaction.do?action=saveData",
data: myDataVar.toString(),
dataType: "text",
success: function(resultData){
alert("Save Complete");
}
});
saveData.error(function() { alert("Something went wrong"); });
The $.ajax() function works fine as I do get an alert for "Save Complete". My dilemna is on the servlet. How do I retrieve the data? I tried to use a HashMap like this...
HashMap hm = new HashMap();
hm.putAll(request.getParameterMap());
...but hm turns out to be null which I am guessing means the .getParameterMap() isn't finding the key/value pairs. Where am I going wrong or what am I missing?

You don't want a string, you really want a JS map of key value pairs. E.g., change:
data: myDataVar.toString(),
with:
var myKeyVals = { A1984 : 1, A9873 : 5, A1674 : 2, A8724 : 1, A3574 : 3, A1165 : 5 }
var saveData = $.ajax({
type: 'POST',
url: "someaction.do?action=saveData",
data: myKeyVals,
dataType: "text",
success: function(resultData) { alert("Save Complete") }
});
saveData.error(function() { alert("Something went wrong"); });
jQuery understands key value pairs like that, it does NOT understand a big string. It passes it simply as a string.
UPDATE: Code fixed.

Simple method to sending data using java script and ajex call.
First right your form like this
<form id="frm_details" method="post" name="frm_details">
<input id="email" name="email" placeholder="Your Email id" type="text" />
<button class="subscribe-box__btn" type="submit">Need Assistance</button>
</form>
javascript logic target on form id #frm_details after sumbit
$(function(){
$("#frm_details").on("submit", function(event) {
event.preventDefault();
var formData = {
'email': $('input[name=email]').val() //for get email
};
console.log(formData);
$.ajax({
url: "/tsmisc/api/subscribe-newsletter",
type: "post",
data: formData,
success: function(d) {
alert(d);
}
});
});
})
General
Request URL:https://test.abc
Request Method:POST
Status Code:200
Remote Address:13.76.33.57:443
From Data
email:abc#invalid.ts

you can use ajax post as :
$.ajax({
url: "url",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify({ name: 'value1', email: 'value2' }),
success: function (result) {
// when call is sucessfull
},
error: function (err) {
// check the err for error details
}
}); // ajax call closing

For the time being I am going a different route than I previous stated. I changed the way I am formatting the data to:
&A2168=1&A1837=5&A8472=1&A1987=2
On the server side I am using getParameterNames() to place all the keys into an Enumerator and then iterating over the Enumerator and placing the keys and values into a HashMap. It looks something like this:
Enumeration keys = request.getParameterNames();
HashMap map = new HashMap();
String key = null;
while(keys.hasMoreElements()){
key = keys.nextElement().toString();
map.put(key, request.getParameter(key));
}

To get the value from the servlet from POST command, you can follow the approach as explained on this post by using request.getParameter(key) format which will return the value you want.