I have the following ajax code in my frontend.

var formData = $('#application-information-step-one').serialize();
var actionUrl = $('#application-information-step-one').attr('action');
$.ajax({
      url: actionUrl,
      type: 'POST',
      data: formData,
      success: function(data) {
        var resp = JSON.stringify(data);
        console.log(resp);
      },
      error: function(data) {

      }

And following code to return json response from my controller if the request is ajax:

        if ($request->ajax()) {
            return response()->json([
                'message' => 'Information saved sucessfully !'
            ],200)->headers('Content-Type', 'application/json');
        }

But with the above code setup. Laravel returns HTML code of same page from where the request was made.

HTML page is rendered in preview section of network tab .

Can anyone suggest what am I missing here ?

CodePudding user response：

return JSON response from controller

if ($request->ajax()) { return response()->json(['status' => 'success', 'data' =>[], 'message' => 'Information saved sucessfully !'],200); }

ajax success function code.

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

and add ajax

dataType: 'json',
contentType: false,
processData: false, 

CodePudding user response：

Check for Ajax request is incorrect, otherwise the controller wouldn't have outputted HTML.

You can try several things:

• use Illuminate\Support\Facades\Request; at the top of the file
• replace request->ajax() with Request::wantsJson()
• use request()->ajax()

Any of the above subject to your Laravel version.

More details here