$.ajax post not working properly

Question

I am trying to do an AJAX request using jQuery using the following code:

$.ajax({
    type: 'POST',
    url: './ajax/mostra_duv.php',
    data: 'pag=1&teste=deu',
    cache: false,
    contentType: false,
    processData: false
})
.done(function(data) {
    if(data!='')
    {
        $("#resumoduvida").html(data);
    }
    else
    {
        $("#resumoduvida").html('<p>Desculpe, houve um problema na conexão ao servidor. Tente novamente</p>');
    }
})
.fail(function() {
    $("#resumoduvida").html('<p>Desculpe, houve um problema na conexão ao servidor. Tente novamente</p>');
});

Then, the mostra_duv.php is just calling print_r($_POST); resulting in an empty array...

I would expect to get $_POST['pag'] and $_POST['teste'] with values corresponding to the request (respectively 1 and 'deu').

Any help is appreciated! Thanks!

Why are you setting `contentType: false`? Just use the default `contentType`. — Barmar, Aug 19 '14 at 03:54
@Barmar Ok thanks. I deleted the comment about it. I always get confused about that. — Funk Forty Niner, Aug 19 '14 at 03:56
@Barmar because I want to upload files via AJAX also... this initial test with static data is just to simplify it — tower, Aug 19 '14 at 04:01
But you're passing a string as data, how do you suppose you get files into a string? You'll need formData for that. — adeneo, Aug 19 '14 at 04:02
And then you'll need to use `contentType: 'multipart/form-data` — Barmar, Aug 19 '14 at 04:05
@adeneo I know that. I can change to formData later, but first I need to pass a string... And it's not working. — tower, Aug 19 '14 at 04:07
@Barmar with default contentType it works... but not for multipart/form-data up to now... Weird! Any other idea? — tower, Aug 19 '14 at 04:10
Apparently you can't set that content type explicitly. See http://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax — Barmar, Aug 19 '14 at 04:11
From what I've read in related questions: when you use `contentType: false` then you **must** use `FormData`, not serialized data strings. If you use serialized data strings, you should use the default `contentType`, which is `text/x-www-form-urlencode`. — Barmar, Aug 19 '14 at 04:15
@Barmar you are correct. I just figured out that contentType: false MUST BE togehter with FormData. I just need to figure out now how to produce a "fake" FormData, considering my input is not coming from a form, but from other javascript events. — tower, Aug 19 '14 at 04:17
As @NedalEldeen says in his comment to his answer, you probably should be using a plugin for this. Normal `$.ajax` can't do file uploads. — Barmar, Aug 19 '14 at 04:43

score 1 · Accepted Answer · answered Aug 19 '14 at 04:02

1

Just Simple code to deal with that point.

$.ajax({
    type: 'POST',
    url: 'pageToYourScript.php',
    data: {page: 1, test: 'test'},
    success: function(data){
        console.log(data);
    },
    error: function(jqXHR){
        console.log(jqXHR);
    }
});

change the values, And handle the returned data or error if there is.

answered Aug 19 '14 at 04:02

Nedal Eldeen

159
1
7

Need to upload files too! – tower Aug 19 '14 at 04:10
@tower you can use a simple plugin such as, http://malsup.com/jquery/form/ And, The following article may help more, http://www.sitepoint.com/10-jquery-ajax-file-uploader-plugins/ – Nedal Eldeen Aug 19 '14 at 04:34

Tieson T. · Answer 2 · 2014-08-19T04:10:59.917

0

I would think that it would be a lot simpler to use the .post() function:

$.post('./ajax/mostra_duv.php', { 'pag': 1, 'teste': 'deu' })
.done(function(data) {
    if(data!='')
    {
        $("#resumoduvida").html(data);
    }
    else
    {
        $("#resumoduvida").html('<p>Desculpe, houve um problema na conexão ao servidor. Tente novamente</p>');
    }
})
.fail(function() {
    $("#resumoduvida").html('<p>Desculpe, houve um problema na conexão ao servidor. Tente novamente</p>');
});

You may also find that load() works, too.

Per your last comment;

Unless you only intend to support browsers that implement (what used to be called) XMLHttpRequest Level 2, you can't upload files via Ajax. There are plugins that will help with that; my personal favorite is Mike Alsup's Form plugin (since it also adds other helper functions): http://malsup.com/jquery/form/#file-upload

edited Aug 19 '14 at 04:10

answered Aug 19 '14 at 04:03

Tieson T.

20,774
6
77
92

2

he added a comment saying that he needs the flexibility of `$.ajax` because he's adding file uploading to it. – Barmar Aug 19 '14 at 04:04
@Barmar Thank you. I probably would not have noticed. – Tieson T. Aug 19 '14 at 04:11
@tower Depends on what you mean by "support file uploads". Not every browser supports Ajax file uploads: http://caniuse.com/#feat=xhr2 - there are polyfills that allow you to mimic the behavior, usually by posting to hidden iframes. – Tieson T. Aug 19 '14 at 04:27

score -1 · Answer 3 · answered Aug 19 '14 at 03:56

-1

what is the data that you are receiving ?

I think you have missed the dataType: "html" inside the ajax.

$.ajax({
    type: 'GET',
    dataType: 'html',
    url: './ajax/mostra_duv.php',
    data: 'pag=1&teste=deu',
    cache: false,
    contentType: false,
    processData: false
})

answered Aug 19 '14 at 03:56

aelor

10,892
3
32
48

The `dataType` option has no effect on how parameters are sent, it's only used to interpret the response. – Barmar Aug 19 '14 at 04:03
@Barmar yes sir but the response he is getting is in html, thats why thought this might be causing the problem. How will it behave without the dataType ? – aelor Aug 19 '14 at 04:07
By default, `$.ajax` looks at the `Content-Type` in the response to determine the `dataType`. So if the server sends `text/html`, it will act as if you did `dataType: 'html'`. – Barmar Aug 19 '14 at 04:09

$.ajax post not working properly

3 Answers3