Send FormData and String Data Together Through JQuery AJAX - ajax

I have the below that uploads an image using JQuery's AJAX function
var id = <?php echo $id; ?>;
var img_data = new FormData($("form")[0]);
$.ajax({
url: 'add.php',
data: img_data,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});
I'd like to include a string with the FormData sent. I tried the following, but no luck
data: img_data {id: id},
What's the correct syntax here?

Use append
var img_data = new FormData($("form")[0]);
img_data.append('id', id);

You could create a JSON data object and pass that as application/json and process the data within add.php:
var data = {
id : <?php echo !empty($id) ? $id : "''",
img_data : new FormData($("form")[0])
};
$.ajax({
url: 'add.php',
data: data,
contentType: "application/json",
type: 'POST',
success: function(data){
alert(data);
}
});
Although unconventional, you could also append the data as a query string to the URL with the POST. You'd also need to edit add.php to get this parameter.
$.ajax({
url: 'add.php?id=' + id,
data: img_data,
processData: false,
type: 'POST',
success: function(data){
alert(data);
}
});

Related

Pass Parameter in Ajax URL

I am trying to pass parameter in below ajax url
function endprogress(){
$("#surfbar").html("Please wait...");
var dataString = 'action=validate&t='+adtk;
$.ajax({
type: "POST",
url: 'yes_manage.php?view=surf&track='+user_name&, /*this line giving error*/
data: dataString,
success: function(msg){
}
});
}
above url field is giving error Expected and identifier instead saw ','
how can I resolve this
Change user_name& => user_name
look like
function endprogress(){
$("#surfbar").html("Please wait...");
var dataString = 'action=validate&t='+adtk;
$.ajax({
type: "POST",
url: 'yes_manage.php?view=surf&track='+user_name, /*remove & at the end user_name*/
data: dataString,
success: function(msg){
}
});
}

$.getJSON to $.ajax syntax?

I have this working .getJSON
$.getJSON('data3.json', function (data) {
})
If convert to $.ajax What should be the value for data?
$.ajax({
type: 'GET',
url: 'data3.json',
datatype: 'json',
data: ?,
success: function(data) {
}
});
You should try this
In the ajax, they are not compulsory to pass some parameters like data, datatype etc.
So you can call ajax without data parameter
$.ajax({
type: 'GET',
url: 'data3.json',
datatype: 'json',
success: function(data) {
}
});

pass multiple datas in to the ajax

Here for sending multiple values to the ajax i had done my code like this please have a look
$("#btnSubmit").on("click", function (e) {
e.preventDefault();
var toPost = $('.row_selected input').serialize();
var form_data={
date: $('#transfer_date').val(),
group: $('#lo_group').val(),
name: $('#name').val(),
phone: $('#phone').val(),
location: $('#loc_id').val()
}
$.ajax({
type: 'POST',
url: '<?php echo base_url();?>admin_control/transfer_tool/<?php echo $result->id;?>',
data: 'toPost='+toPost+'&form_data='+form_data,
cache: false,
dataType:"json",
});
});
Here only first value is getting and the second value is not passing,tried a lot but couldn't find a solution.please help me to solve
Convert javascript object to data parameters
use jQuery.param(form_data)
$.ajax({
type: 'POST',
url: 'www.test.com/admin_control/transfer_tool/',
data: 'toPost='+toPost+'&form_data='+jQuery.param(form_data),
cache: false,
dataType:"json",
});

Can't pass data from attributes using ajax laravel 5.1

var formData = new FormData();
formData.append('name', name.val());
formData.append('email', email.val());
formData.append('contact_number', contact_number.val());
formData.append('barangay', barangay.val());
formData.append('landmark', landmark.val());
formData.append('password', password.val());
formData.append('confirm_password', confirm_password.val());
//Problem start here it came from attributes but I can alert the data and it was fine.
formData.append('image_pin', img_top);
formData.append('img_left', img_left);
formData.append('img_z_index', img_z_index);
formData.append('input_value', input_value);
formData.append('input_top', input_top);
formData.append('input_left', input_left);
$.ajax({
url: 'register',
headers: {'X-CSRF-TOKEN': token.val() },
method: 'post',
processData: false,
contentType: false,
cache: false,
dataType: 'json',
data: formData,
success: function(data){
console.log(data);
},
error: function(){
}
});
//The input works fine but the attributes data is undefined
$request->input('img_top');
$request->input('img_left');

Ajax Post not sending data Correctly

VB.net, MVC4, asp.net views.
I would like to know why I cannot send or what I am doing wrong sending a parameter(int), parameter(model).
data:
var ID = '<%: Model.ID%>';
var data = $('#dlg').find('form').serialize();
Ajax Post:
$.ajax({
url: '<%: Url.Action("EST", "Now")%>',
type: 'POST',
data: { id: ID, model: data },
success: function (rData) {
$('#divE').html(rData);
}
});
Now - Controller:
<HttpPost> _
Function EST(id As Integer, model As EViewModel) As ActionResult
So I'm passing a modelID and the forms data, sending them separately( with modifications ) both work, but sending them together it seems to null the 2nd parameter. Found by debugging the action.
try use JSON.stringify.
Include contentType: "application/json; charset=utf-8", when you omit the contentType value default is 'application/x-www-form-urlencoded; charset=UTF-8' this could become a trouble when you will post data
$.ajax({
url: '<%: Url.Action("EST", "Now")%>',
type: 'POST',
data: JSON.stringify({ id: ID, model: data }) ,
contentType: "application/json; charset=utf-8",
success: function (rData) {
$('#divE').html(rData);
}
});

Resources