Ajax Post request body returns undefined - Jquery ajax

214zg252rArslan
April 19, 2022
154 views
0 votes
2 Answers

I am trying to send some data to backend using ajax post request. Like this

    $.ajax({
    url: "/aa",
    dataType: 'text',
    type: 'post',
    contentType: 'application/x-www-form-urlencoded',
    data: input.value,
    success: function (result) {
        console.log("Success", input.value);
    },
    error: function (data) {
        console.log(data);
    }
});

but i when i want to print my bodys data like this i recieve undefined

console.log(requ.body.data);

i also use body parser in the backend

app.use(bodyParser.raw())

why it returns undefined?

Answers

this works, please tell me if you want me to create a fiddle

Controller:

[HttpPost]
public string Index900(string theValue)
{
    try
    {
        throw new Exception("this is the Value" + theValue);
    }
    catch (Exception ex)
    {
        return ex.Message;
    }
}

public ActionResult Index()
{
    return View();
}

View:

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        $(function () {
            $("#theBtn").click(function () {
                var theValue = $("#theInput").val();
                $.ajax({
                    url: "/Home/Index900",                          //changed this
                    dataType: 'text',
                    type: 'post',
                    contentType: 'application/json',                //changed this
                    data: JSON.stringify({ theValue: theValue }),   //changed this
                    success: function (result) {
                        //console.log("Success", input.value);      //changed this
                        alert(result);
                    },
                    error: function (data) {                        //changed this
                        //console.log(data);                        //changed this
                        alert("error...")
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div>
        <input type="button" id="theBtn" value="Click to start ajax" />
        <input type="text" id="theInput" value="Some Value" />
    </div>
</body>
</html>

Hope this will work

<script>  
    $(document).ready(function () { 
//function will be called on button click having id btnsave
        $("#btnSave").click(function () { 
            $.ajax(  
            {  
                type: "POST", //HTTP POST Method  
                url: "Home/AddEmployee", // Controller/View   
                data: { //Passing data  
                    Name: $("#txtName").val(), //Reading text box values using Jquery   
                    City: $("#txtAddress").val(),  
                    Address: $("#txtcity").val()  
                }  
  
            });  
  
        });  
    });  
  
</script> 


in controller side

     [HttpPost]    
        public ActionResult AddEmployee(EmpModel obj)    
        {    
            AddDetails(obj);    
      
            return View();    
        }

Please signup or login to give your own answer.

Click here to cancel reply.

Ajax Post request body returns undefined – Jquery ajax

Answers