unable to post data using jquery ajax

Question

I am able fetch the json data using the form below:

<form enctype="multipart/form-data" action="http://46.51.220.101/kookooapi/index.php/IVRSUploadFile/UploadFile" method="post">
    <input id="default_file" name="file" type="file" />
    <input id="account" name="account" type="hidden" value="testing"  />
    <input type="submit" value="Save">                               
</form>

but the same form when used with jquery ajax is throwing error: 501 (Not Implemented)

$('#default_file').change(function (e) {
    //on change event  
    formdata = new FormData();
    if ($(this).prop('files').length > 0)
    {
        file = $(this).prop('files')[0];
        formdata.append("music", file);
    }
});


function hitexternal(e) {
    $.ajax({
        url: "http://46.51.220.101/kookooapi/index.php/IVRSUploadFile/UploadFile",
        type: "POST",
        data: new FormData($("#default_file")[0], {data :{"account":"testing"}}),
        processData: false,
        contentType: 'application/json',
        success: function (response) {
            console.log('resp: ' , response);
        },
        error: function (jqXHR, textStatus, errorMessage) {
            console.log("error:" , errorMessage);
        }
    });
    e.preventDefault();
}

What did I miss here?

I think you missed "how to construct FormData" - https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData - also, your `change` function modifies some globals ... which don't seem to be used, so it's basically pointless as far as the code shown — Jaromanda X, Sep 07 '16 at 06:19

madalinivascu · Accepted Answer · 2016-09-07T06:57:38.627

1

Remove the content type FormData takes as input the form and converts it into key/value pairs

function hitexternal(e) {
    var formdata =  new FormData($("form")[0]);
    $.ajax({
        url: "http://46.51.220.101/kookooapi/index.php/IVRSUploadFile/UploadFile",
        type: "POST",
        data: formdata ,
        processData: false,
        contentType: 'multipart/form-data', // or set it as false to let jquery chose the right one for you
        success: function (response) {
            console.log('resp: ' , response);
        },
        error: function (jqXHR, textStatus, errorMessage) {
            console.log("error:" , errorMessage);
        }
    });
    e.preventDefault();

edited Sep 07 '16 at 06:57

answered Sep 07 '16 at 06:27

madalinivascu

32,064
4
39
55

500 error? this means in your php page you have some errors – madalinivascu Sep 07 '16 at 06:31
Can you post your php? – madalinivascu Sep 07 '16 at 06:31
try setting the `contentType: 'multipart/form-data',` if this doesn't work then you have some problems with your server configuration – madalinivascu Sep 07 '16 at 06:40
Please edit your answer so it will help others. Thank you – kittu Sep 07 '16 at 06:53

Karthikeyan Sekar · Answer 2 · 2016-09-07T06:36:20.753

0

 function hitexternal(e) {
        e.preventDefault();
        var fd=new FormData();  
        fd.append('image',$("#default_file")[0].files[0]);  
        fd.append('account','testing');
        $.ajax({
            url: "http://46.51.220.101/kookooapi/index.php/IVRSUploadFile/UploadFile",
            type: "POST",
            data: fd,
            processData: false,
            contentType: false,
            datatype:'JSON',
            success: function (response) {
                console.log('resp: ' , response);
            },
            error: function (jqXHR, textStatus, errorMessage) {
                console.log("error:" , errorMessage);
            }
        });

    }

Lets Try this code

edited Sep 07 '16 at 06:36

answered Sep 07 '16 at 06:26

Karthikeyan Sekar

223
3
13

gives `500 (Internal Server Error)` now – kittu Sep 07 '16 at 06:29
what's the params are there in Server Upload Function, because send the 2 params in to the function .. – Karthikeyan Sekar Sep 07 '16 at 06:34

score 0 · Answer 3 · edited May 23 '17 at 12:01

A 501 is HTTP status code for not implemented. This status code is received when the server does not support the facility required. I don't know if this is related, but generally when requesting JSON on the client to a server in a different domain you'll need to use JSONP instead of JSON due to the Same Origin Policy. The good thing is ,it doesn't appear that their API supports using JSONP. You can reffer these: How to mock a 501 error from ajax call Why do I get this 501 Not Implemented error? Post data into database via ajax. displays 501 internal error Enable ASP.NET ASMX web service for HTTP POST / GET requests http://www.computerhope.com/issues/ch001020.htm

score 0 · Answer 4 · answered Sep 07 '16 at 07:16

Hello Here is the answer please check

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
    function savedata()
    {
        jQuery.post({
            url:"http://127.0.0.1/hk/ajaxpostaction.php",
            type:"POST",
            data:{"name":document.getElementById('username').value,"address":document.getElementById('address').value},
            success: function(response){
                alert("Post data : "+ result);
            },
            error: function(err){console.log('Error :  ' + err);}
        });
    }
</script>

</head>

<body>
    <form method="post">
            Name : <input type="text" id="username" name="username" />
            Address : <input type="text" id="address" name="address" />
            <input type="button" name="submit" onclick="savedata();" value="submit" />
    </form>
</body>
</html>

Thanks And Regards Hiren

score 0 · Answer 5 · answered Jun 13 '20 at 23:42

Year 2020 update An Alternative answer to jquery $.ajax post method. After spending the whole night, I crafted my own solution used with a php script. I have tried everything, from $.post, $jqhr, $jqXHR but no luck

This scripts tells if an user exists. But this technique can used in other uses too.

jquery version 3.5 PHP version 7.4

I observed that the data doesn't gets sends to PHP, even upo using the $_GET in the php script, so the efficient way is to craft the url yourself and post it!

Javascript Code

    var email = $('#email').val();
    $.ajax({
            url: 'userexists.php?email='+email,
            method: 'POST',
            dataType:'text',
            contentType: 'application/x-www-form-urlencoded',
            data: {
              'email': email
            },

            // on success response
            success:function(response) {

              $("#result").html(response);

            },

            // error response
            error:function(e) {
              $("#result").html("Some error encountered.");
            }
          })

PHP Code

<?php
  require 'dbconfig.php';

  $email = $_GET['email'];
  $usr = "SELECT * FROM users WHERE email = '$email' ";
  $results = $connection->query($usr);



  if (mysqli_num_rows($results) == 0) { // if new user . Insert a new record
    echo "fresh";
    echo $email;
  } else {   // If Returned user . update the user record   
    echo "taken";
  }


  $connection->close();
  exit();


?>

unable to post data using jquery ajax

5 Answers5