ajax submit wrong data to PHP - Jquery ajax

user3424840
August 9, 2020
122 views
0 votes
2 Answers

This is html file that submit ajax by button click to PHP script(on IIS).

But PHP script received wrong formatted data (there are brackets added [] and no parameter ‘section’ transmitted

What can be wrong

It would be good to have solution both: in JQuery and pure javascript

——————- HTML

<!DOCTYPE html>
<html STYLE="height:100%;">
<head></head>
<body>
<SCRIPT>
function zPostToTopic_ajax(){
var url='http://the_server/infospace/php/infospace2.php';

var formData2 = new FormData();
formData2.append('section', 'general');
formData2.append('action2', 'preview');

http_request=new XMLHttpRequest();//work for IE11 too, // code for IE7+, Firefox, Chrome, Opera, Safari
http_request.open("POST", url);
//------------------------------------
http_request.onreadystatechange = function() {
if(http_request.readyState == 4 && http_request.status == 200)
  alert(http_request.responseText)
}
http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
http_request.send(formData2);
} 
</SCRIPT>


<FORM NAME=form_post_to_topic ID=form_post_to_topic METHOD=POST action="http://the_server/infospace/php/infospace2.php">
 &nbsp <INPUT TYPE=BUTTON VALUE=Send onClick="zPostToTopic_ajax();return false;">
</FORM>

</body>
</html>

————————– PHP script

<?php

print_r($_REQUEST);
?>

————————— Received data:

Array
(
    [-----------------------------276402058428
Content-Disposition:_form-data;_name] => "section"

general
-----------------------------276402058428
Content-Disposition: form-data; name="action2"

preview
-----------------------------276402058428--
)

Answers

Use jQuery’s .ajax() function. Here’s an example where I post a file upload too.

            var jform = new FormData();
            jform.append('supply_id',supply_id);
            jform.append('fuel_usage',$('#fuel_usage').val());
            jform.append('cost',$('#cost').val());
            jform.append('currency',$('#currency').val());
            jform.append('evidence',$('#evidence').get(0).files[0]);
            
            $.ajax({
                url: '/your-form-processing-page-url-here',
                type: 'POST',
                data: jform,
                dataType: 'json',
                contentType: false,
                cache: false,
                processData: false,
                success: function(data, status, jqXHR){
                    alert('Hooray! All is well.');
                    console.log(data);
                    console.log(status);
                    console.log(jqXHR);
                    
                },
                error: function(jqXHR,status,error){
                    // Hopefully we should never reach here
                    console.log(jqXHR);
                    console.log(status);
                    console.log(error);
                }
            });

Your problem is that you are setting the wrong content type for your request. When you use a formdata object the content type will be multi-part/formdata.
So when you are using a formdata object you do not set the content type and it is set for you.

function zPostToTopic_ajax(){
    var url='http://the_server/infospace/php/infospace2.php';

    var formData2 = new FormData();
    formData2.append('section', 'general');
    formData2.append('action2', 'preview');

    http_request=new XMLHttpRequest();//work for IE11 too, // code for IE7+, Firefox, Chrome, Opera, Safari
    http_request.open("POST", url);
    //------------------------------------
    http_request.onreadystatechange = function() {
        if(http_request.readyState == 4 && http_request.status == 200)
            alert(http_request.responseText)
    }
    
    http_request.send(formData2);
}

Please signup or login to give your own answer.

Click here to cancel reply.

ajax submit wrong data to PHP – Jquery ajax

Answers