如何在ajax中调用模型？

Question

I have an ajax function whose job is to append a row in a datatable whenever I store. The problem is when it appends, obviously, it appends what was inputted. But I want that all foreign keys to correspond to it's name.

for example..

a user's job id is 5... so in ajax i want to append that $user->job->name

can I call a model in ajax?

This is how my ajax looks like btw..

$.ajax({
                type: 'POST',
                url: '{{ ('/users') }}',
                data: {
                    '_token': $('input[name=_token]').val(),
                    'name': $('input[name=user_name]').val(),
                    'email': $('input[name=user_email]').val(),
                    'password': $('input[name=user_password]').val(),
                    'role_id': $('#user_role option:selected').val(),
                    'team_id': $('#user_team option:selected').val()

                }}).done(function( data ) {
                    //add rows in modal
                    $('#userTable').append("<tr class='item" + data.id + "'><td align='center'><input type='checkbox' class='i-checks' name='input[]' value='"+data.name+"'> </td><td>" + data.name + "</td><td>" + data.email + "</td><td>" + data.role_id + "</td><td>" + data.team_id + "</td><td>" + data.team_id + "</td><td><a data-toggle='modal' href='#modal-edit-" + data.id +"'><i class='fa fa-pencil'></i> Edit</a></td><td><button class='edit-modal btn btn-info' id='editUser' data-id='" + data.id + "' data-name='" + data.name + "'><span class='glyphicon glyphicon-edit'></span> Edit</button></td></tr>");
                    //clear the modal
                    $("#modal-add-user").find("input,select").val('').end();

   });  

Answer 1

If you want to get back both the user & job details you'll need to implement something like but not the same as (please use proper input & exception handling) this:

Laravel Controller:

public function add(Request $request) {
  $user = new User(); 
  // Validate & add user, make sure you validate relationship id's
  $user->save();

  return response()->json(['user' => $user, 'roleEquivalents' => $user->role->name]); // This returns a nicely structured object
}

See Laravel's HTTP Response documentation for more information on returning JSON objects.

JQuery

$.ajax({
            type: 'POST',
            url: '{{ ('/users') }}',
            data: {
                '_token': $('input[name=_token]').val(),
                'name': $('input[name=user_name]').val(),
                'email': $('input[name=user_email]').val(),
                'password': $('input[name=user_password]').val(),
                'role_id': $('#user_role option:selected').val(),
                'team_id': $('#user_team option:selected').val()

            },
            error: function (xhr, ajaxOptions, thrownError) {
                // You should throw an error from Laravel if it failed validation
            }}).done(function( data ) {
                if (data) { // If it failed we don't have data
                    var user = data.user;
                    var roleEquivalents = data.roleEquivalents; // This is your role name

                    //add rows in modal
                    $('#userTable').append("<tr class='item" + user.id + "'><td align='center'><input type='checkbox' class='i-checks' name='input[]' value='"+user.name+"'> </td><td>" + user.name + "</td><td>" + user.email + "</td><td>" + user.role_id + "</td><td>" + user.team_id + "</td><td>" + user.team_id + "</td><td><a data-toggle='modal' href='#modal-edit-" + user.id +"'><i class='fa fa-pencil'></i> Edit</a></td><td><button class='edit-modal btn btn-info' id='editUser' data-id='" + user.id + "' data-name='" + user.name + "'><span class='glyphicon glyphicon-edit'></span> Edit</button></td></tr>");
                    //clear the modal
                    $("#modal-add-user").find("input,select").val('').end();
                }

  });  

It also looks like you have another Team object, you can return it the same way.