Question 250238 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – passing JSON formatted data with ajax is not working

I am trying to call an action in my controller with some JSON data, it seems to be reaching the action but the data is all null.

This is what my Ajax function looks like:

function AjaxPost(url, data) {
    $.ajax({
        url: url,
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(data),
        //I tried adding the following but to no avail:
        processData: true,
        traditional: true,
        success: function (response) {
            //success code
        },
        error: function (err) {
            console.error(err);
        }
    });
}

This is how I make the AjaxPost function:

<a href="javascript:AjaxPost('./Chat/PrivateChat', {id:123, username:'username', connectionID:'connectionID'})">

This is the controller I am calling:

public IActionResult PrivateChat(int id, string username, string connectionID)
{
    //at this point
    //id = 0
    //username = null
    //connectionID = null
}

I have also tried methods from the following sources, but the data stays null:

link1

link2

link3

Tags:

2

Answers


  1. 0

    Try adding dataType: 'json'. It will work. Thanks.!

    Login or Signup to reply.
  2. 0

    I am trying to call an action in my controller with some JSON data, it
    seems to be reaching the action but the data is all null.

    Well, based on your scenario and description, you would get null data always. Beause the way, you are sending Json data either you have to have Request model in controller wraping with [FromBody] or you should post data as query parameter like this way:"http://localhost:5094/AjaxPostNull/PrivateChat2?id=" + data.id + "&username=" + data.username + "&connectionID=" + data.connectionID

    Let’s have a look at practice, how we could achieve that:

    Way: FormBody Wrapper:

    Request Model:

    public class AjaxRequestModel
 {
     public  int id { get; set; }
     public string username { get; set; }
     public string connectionID { get; set; }
 }

    Controller Signature:

    public IActionResult PrivateChat([FromBody] AjaxRequestModel ajaxRequestModel)
{
    //at this point
    //id = 0
    //username = null
    //connectionID = null

    return null;
}

    Note: If you send request along with json model, you should wrap the controller with [FromBody]

    Script:

    @section scripts {
    <script>
        function PostAjaxRequest() {
            var url = "http://localhost:5094/AjaxPostNull/PrivateChat2?id=" + data.id + "&username=" + data.username + "&connectionID=" + username +;
            $.ajax({
                url: url,
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                // data: JSON.stringify(data),
                success: function (response) {
                    //success code
                },
                error: function (err) {
                    console.error(err);
                }
            });
        }
    </script>
}

    Output:

    enter image description here

    enter image description here

    Alternative way: Query String

    enter image description here

    @section scripts {
    <script>
        function PostAjaxRequest() {
            

            var data = { id: 123, username: "Test User Name", connectionID: "My con ID" };


            var url = "http://localhost:5094/AjaxPostNull/PrivateChat2?id=" + data.id + "&username=" + data.username + "&connectionID=" + data.connectionID
            $.ajax({
                url: url,
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                // data: JSON.stringify(data),
                success: function (response) {
                    //success code
                },
                error: function (err) {
                    console.error(err);
                }
            });
        }
    </script>
}

    Output:

    enter image description here

    Note: Please refer to this official document if you want to know more.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search