Unable to receive data using AJAX post in Laravel

Question

I am trying to send some variables(data),one is the checkbox text, and other is the value in the textarea field to the controller in Laravel through ajax, below is the script:

<script>
    $('#btn1').on('click', function() {

        $('input[type="checkbox"]').on('click', function() {
        var aa=$(this).next('label').text();
        var bb=$('textarea#txt2').val();
        $.ajaxSetup({
            headers:
                {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
        });
           $.ajax({
            type: "POST",
            url: "/masterdata",
            //dataType: 'json',
            data: {aa,bb},
            success:function(){
            console.log(data);    
       }
        ,error:function(){ 
            console.log("Error!!!!");
       }    
    });
    });
    }); 
     </script>

On trying to retrieve the request values in the controller, only the request token gets displayed, and the ajax function doesn't display the success or error message either.What am I missing here?

Have you checked in your browser's development tools if the data gets sent to the server correctly? — Jerodev, Dec 10 '18 at 09:30
I did, and I can see the token as well as some other request values, not the ones that I try sending through AJAX though. — MVS, Dec 10 '18 at 09:32
Nope, 200, which should mean that the POST works fine right> — MVS, Dec 10 '18 at 09:33
You can check my this answer -https://stackoverflow.com/a/47653566/7849549 ,I doubt the way you are sending ajax request — Shubham Dixit, Dec 10 '18 at 09:35
I have also specified the route for the post method, so I am unable to understand what needs to be done here. — MVS, Dec 10 '18 at 09:38

kshitij · Answer 1 · 2018-12-10T10:29:57.367

0

Try your data as in this format:

data:{'posa': aa, 'posb': bb},

and

    success:function(data){
        console.log(data);    
   }

Hope this helps.

edited Dec 10 '18 at 10:29

answered Dec 10 '18 at 10:02

kshitij

642
9
17

Still not able to view them in the response tab. – MVS Dec 10 '18 at 10:07
Can i have a look of code for better understanding? – kshitij Dec 10 '18 at 10:13
So there's nothing wrong then? You able to view the response as well? – MVS Dec 10 '18 at 10:26
Yup i am getting response while using your ajax request format, can not say anything about your backend code (need to check to be sure). @MVS – kshitij Dec 10 '18 at 10:29

score 0 · Answer 2 · answered Dec 10 '18 at 10:08

you need to set a variable on ajax success like this:

$.ajax({
            type: "POST",
            url: "/masterdata",
            //dataType: 'json',
            data: {aa,bb},
            success:function(response){
            console.log(response);    
       }
        ,error:function(){ 
            console.log("Error!!!!");
       }    
});

Bhavin Solanki · Answer 3 · 2018-12-10T11:08:46.213

0

i found two issue in your ajax request.

you have to change data: {aa,bb}, to object like data: {aa : aa, bb : bb},
Your success response log is wrong. Current code success:function(), it should be success:function(data)

Full output of new code is :

<script>
    $('#btn1').on('click', function() {

        $('input[type="checkbox"]').on('click', function() {
        var aa=$(this).next('label').text();
        var bb=$('textarea#txt2').val();
        $.ajaxSetup({
            headers:
                {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
        });
           $.ajax({
            type: "POST",
            url: "/masterdata",
            dataType: 'json',
            data: {aa : aa, bb : bb},
            processData: false,
            cache: false, 
            async :false,
            success:function(data){
            console.log(data);    
       }
        ,error:function(){ 
            console.log("Error!!!!");
       }    
    });
    });
    }); 
</script>

To get parameter value in controller use

 /**
 * Store.
 *
 * @param  Request  $request
 * @return Response
 */
public function store(Request $request)
{
    $aa = $request->input('aa');
    $bb = $request->input('bb');
    //Your code here
}

edited Dec 10 '18 at 11:08

answered Dec 10 '18 at 10:16

Bhavin Solanki

4,740
3
26
46

Hey, I tried this as well, but shouldn't I be able to view the data being passed here i.e aa and bb in either params/response using the developer tools?, – MVS Dec 10 '18 at 10:23
@MVS, how you are trying to get parameter. can you please share? – Bhavin Solanki Dec 10 '18 at 10:25
@MVS also share route you have set – Bhavin Solanki Dec 10 '18 at 10:26
Route: Route::post('/masterdata', 'MasterdataController@store'); – MVS Dec 10 '18 at 10:27
The parameters are received through var aa,bb. – MVS Dec 10 '18 at 10:27
@MVS i mean in controller how you try to get parameter? – Bhavin Solanki Dec 10 '18 at 10:52
It returns me a null value. – MVS Dec 10 '18 at 10:59
@MVS are you able to get value of aa and bb in click event and before ajax call? – Bhavin Solanki Dec 10 '18 at 11:05
@MVS updated my answer added `processData: false,cache: false, async :false,` please try this – Bhavin Solanki Dec 10 '18 at 11:09
Tried it, still not working, and yes, I was able to retrieve the values of aa and bb outside the ajax function – MVS Dec 10 '18 at 12:13
@MVS please add html to your question so we get more idea – Bhavin Solanki Dec 12 '18 at 09:58
will be adding it in sometime, sorry for the delayed reply. – MVS Dec 12 '18 at 18:30

score 0 · Answer 4 · answered Dec 10 '18 at 12:06

<script>
    $('#btn1').on('click', function() {

        $('input[type="checkbox"]').on('click', function() {
        var aa=$(this).next('label').text();
        var bb=$('textarea#txt2').val();
        $.ajaxSetup({
            headers:
                {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
        });
           $.ajax({
            type: "POST",
            url: "/masterdata",
            //dataType: 'json',
            data: 'aa=test'+'&bb=test',
            success:function(){
            console.log(data);    
       }
        ,error:function(){ 
            console.log("Error!!!!");
       }    
    });
    });
    }); 
     </script>

aa and bb is a variable and test is a string.you can also data send to sever side like this. data: 'aa='aa+'&bb='bb, — Priya Goud, Dec 10 '18 at 12:25

Unable to receive data using AJAX post in Laravel

4 Answers4