How to add ajax parameters? - javascript

Faced with such a problem that you can't add parameters to ajax request, because there is a "Form Data" and it does not work to add more options. When you add in the parameter 'data' another variable, the error occurs. How to do that would be to post a file and parameters in one request?
Forgive the mistake, error or no, the php file simply does not output anything, rather empty values
//Here the file is sent without problems, but the parameters no more don't accept php file, nothing displays in the result
var fd = new FormData();
fd.append('file', input[0].files[0]);
$.ajax({
url: "/controllers/createNewsController.php",
data: fd,
type: "POST",
processData: false,
contentType: false,
success: function(data) {
$(".news .containers").append(data);
}
});
//When this code runs the PHP file won't take anything, although I was expecting the output variables and the file. Using var_dump, $_POST and $_FILES displays array(0){}
var fd = new FormData();
fd.append('file', input[0].files[0]);
$.ajax({
url: "/controllers/createNewsController.php",
data: {fd, title:newsHeader, description:description, hashTag:hashTag, themeHashTag:themeHashTag, viewNews:viewNews},
type: "POST",
processData: false,
contentType: false,
success: function(data){
$(".news .containers").append(data);
}
});
//Similarly, nothing appears in the php file
var fd = new FormData();
fd.append('file', input[0].files[0]);
$.ajax({
url: "/controllers/createNewsController.php",
data: {fd:fd, title:newsHeader, description:description, hashTag:hashTag, themeHashTag:themeHashTag, viewNews:viewNews},
type: "POST",
processData: false,
contentType: false,
success: function(data){
$(".news .containers").append(data);
}
});

Just like you have appended the file, you can append more data into it like:
fd.append('file', input[0].files[0]);
fd.append('var1', val1);
fd.append('var2', val2);

Related

Ajax not passing correct data to $_POST on responding php page

I've got an ajax function:
$('#addSiteButton').on('click',function() {
let addSiteOption = $('#enterNewWebsiteLink').val();
const form = new FormData();
form.append('addSiteOption', addSiteOption);
$.ajax({
url: "includes/submit_site.php",
data: { 'data': form },
method: "POST",
contentType: false,
processData: false,
enctype: false,
cache: false,
datatype: "text",
success: function (response, data) {
}
});
My PHP file looks just like this:
if (isset($_POST['data'])) {
$websitelink = $_POST['addSiteOption'];
}
my HTML looks like this:
<input type="url" form="addsite" class="enterNewWebsiteLink"
id="enterNewWebsiteLink"
name="enterwebsitelink"
placeholder="Enter A New Website">
The error that I am getting is: Warning: Undefined array key "data"
I've tried outputting the variable addSiteOption and it outputs the URL correctly.
The frustrating thing, I've been checking/copying this against a previous project I did that I got it working in, and I can't make any difference between them now.
I get a 200 response from the server for the page.
You can't serialize FormData, and processData: false tells jQuery not to try to serialize the data: option.
You should just pass the FormData as the data: option. Then the keys of the FormData will become the $_POST keys.
JS:
$('#addSiteButton').on('click',function() {
let addSiteOption = $('#enterNewWebsiteLink').val();
const form = new FormData();
form.append('addSiteOption', addSiteOption);
$.ajax({
url: "includes/submit_site.php",
data: form,
method: "POST",
contentType: false,
processData: false,
enctype: false,
cache: false,
dataType: "text",
success: function (response, data) {
}
});
PHP:
if (isset($_POST['addSiteOption'])) {
$websitelink = $_POST['addSiteOption'];
}
You also had a typo: datatype: should be dataType:

Wordpress AJAX call always returns 0

I am trying to make an AJAX call within WP, though I always get '0' as the return value. I've looked through SO and WP Stack Exchange but still haven't had any luck with this.
Steps that I have taken:
including die() or wp_die() at the end of php script
deleting both contentType: false, and processData: false
altering data: fd, so it does not pass in the 'fd' variable, but an actual object with the needed information
verified the ajax url 'ajax_object.ajax_url'
Any help is greatly appreciated.
JS FILE
let fd = new FormData();
fd.append("action", "user_zip");
fd.append("security", ajax_object.ajax_nonce);
fd.append("zip", zip);
$.ajax({
url: ajax_object.ajax_url,
data: fd,
type: "POST",
contentType: false,
processData: false,
success: function (data) {
console.log(data);
},
});
PHP File
function userZip()
{
wp_verify_nonce('ajax_file_nonce', 'security');
echo 'Test';
wp_die();
}
add_action('wp_ajax_nopriv_user_zip', 'userZip');
add_action('wp_ajax_user_zip', 'userZip');

contentType: false and processData: false make POST empty in PHP

I am trying to upload a file to my server using AJAX. The AJAX call works fine and my PHP returns correctly but when I add contentType: false and processData: false it no longer does.
var formData = new FormData();
formData.append('image', input.files[0]);
$.ajax({
url: "php/API.php",
data: {action: "changeProfilePicture", profilePicture: formData},
type: "POST",
contentType: false, // if i remove this
processData: false, // and this, and my form data in `data:` then POST is not empty
success: function(resp) {
console.log(resp)
}
});
// inside of php/API.php
<?php
// post is empty
print_r($_POST);
if(isset($_POST) && !empty($_POST)) {
...
}
?>
When sending multipart/formdata with jQuery.ajax, the request data should be an instance of FormData. e.g.
var formData = new FormData();
formData.append('image', input.files[0]);
formData.append('action', 'changeProfilePicture');
$.ajax({
url: "php/API.php",
data: formData,
type: "POST",
contentType: false,
processData: false,
...

How to append more data in FormData for django?

My reference is here How to send FormData objects with Ajax-requests in jQuery?
The answer on that link worked on my program. My problem is how to append more data in FormData? I'm using python django and I would like to know where I can put the csrfmiddlewaretoken and inputfilename
Before, this is what I have in form data
var form_data = {
inputfilename: $("#filename").val(),
inputfile: $("#file").val(),
csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
ajax: 1
};
and now,
var form_data = new FormData();
form_data.append('file', input.files[0]);
I'm not quite sure what's the issue you are having. Just append the csrf token the way you append the file:
var fd = new FormData();
fd.append('file', input.files[0] );
fd.append('csrfmiddlewaretoken', csrf_token);
$.ajax({
url: url,
data: fd,
processData: false,
contentType: false,
type: 'POST',
success: callback
});

Clear formData after $.ajax submit

var fd = new FormData();
fd.append( 'file', input.files[0] );
fd.name = 'something';
fd.etc = 'something more';
$.ajax({
url: 'http://example.com/script.php',
data: fd,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
alert(data);
}
});
I put above code within a submit event, I found in my backend I received duplicated formData's data. Because after submit I did not want to hard refresh the page for good UX. How to clear the formData after ajax's success?

Categories