如何将视图发送回Laravel中的ajax

时间:2018-01-03 05:57:55

标签: php jquery ajax laravel-5.5

我是Laravel的新手。我创建了一个表单,当用户点击提交按钮时,我进行了ajax调用并将数据保存到数据库中的表中。直到这里的一切都很好。保存数据后,我正在进行另一个ajax调用以显示最近保存的信息。现在,当我尝试在视图中呈现数据时,我得到一个异常  {"readyState":4,"responseText":"{\n \"message\": \"Trying to get property of non-object (View: D:\\\\xampp\\\\htdocs\\\\userinfo\\\\resources\\\\views\\\\ajax\\\\show.blade.php)

如果我在不使用ajax的情况下执行相同的操作,则可以正常工作。

路线:

//route for ajax call to display user information
Route::get('/userinfo','ClientsController@ajaxShow');

控制器

public function ajaxShow(Client $client){
        $userID=Input::get('id');
        $user=Client::find($userID);
        $msg='Your data is saved.Go to listing page to see.';
        $returnHtml=view('ajax.show',compact('msg'))->with('user',$user)->render();
        return $returnHtml;
    }

模型

class Client extends Model
{
    protected $fillable=[
        'name',
        'prov_id',
        'telephone',
        'postal',
        'salary'
    ];
    use SoftDeletes;

    //client/users table can have many provinces.
    public function province(){
        return $this->belongsTo('App\Province','prov_id');
    }
    protected $table='users';
    protected $dates=['deleted_at'];
}

查看

<div class="alert alert-primary">
        {{$msg}}<br/>
</div>
<div>
    {{$user}}

</div>

<div class="info_wrapper">
    Name:{{$user->name}}<br/>
    Province :{{$user->prov_id->name}}<br/>
    Telephone :{{$user->telephone}}<br/>
    Postal:{{$user->postal}}<br/>
    Salary:{{$user->salary}}
</div>

当我在不使用ajax的情况下执行相同的操作时,它可以完美地运行。

路线

Route::get('/testuserinfo','ClientsController@testShow');

控制器

public function testShow(Client $client){
        $user=Client::find(293);
        $msg='Your data is saved.Go to listing page to see.';
        return view('clientinfo.show',compact('user','msg'));
    }

查看

<div class="alert alert-primary">
        {{$msg}}<br/>
    </div>

    <div class="info_wrapper">
        Name:{{$user->name}}<br/>
        Province :{{$user->province->name}}<br/>
        Telephone :{{$user->telephone}}<br/>
        Postal:{{$user->postal}}<br/>
        Salary:{{$user->salary}}
    </div>

的Ajax

$.ajaxSetup({
        headers:{
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

//when the user clicks on save button call ajax to save user information
    $('#frmSaveUser').on('submit',function(e){
       e.preventDefault();

        var clientName=$.trim($("input[name='name']").val());
        var province=$("input[name='prov_id']").val();//$("#_province").val();
        var tel=$.trim($("input[name='telephone']").val());
        var postal=$.trim($("input[name='postal']").val());
        var salary=$.trim($("input[name='salary']").val());


       if(validateInputFields(clientName,province,tel,postal,salary)){
           $.ajax({
               method:'POST',
               url:$(this).attr('action'),
               data:$(this).serialize(), //get all the input field values
               dataType:'json'})
               .done(function(res){
                   //todo
                  // console.log('res:'+JSON.stringify(res));
                   showUserInformation(res.id)
               })
               .fail(function(res){
                   if(res.status!==422){
                       //alert('Error saving your work.');
                       $('#frmSaveUser').find('.error').remove();//remove any previous errors displayed
                       console.log(res);
                       return;
                   }
                   else{

                       $('#frmSaveUser').find('.error').remove();
                       //parse the response text and and get the errors
                       var errors=JSON.parse(res.responseText);
                       // console.log(errors);
                       for(var fieldName in errors['errors']){
                           //console.log(errors['errors'][fieldName]);
                           var inputField=$('#frmSaveUser').find('[name='+fieldName+']').parent(); // find the parent element of the input that has error
                           //if there are more than one error message create a list by concatenating errors in msg var.
                           var msg='<ul>';
                           for(var i=0;i<errors['errors'][fieldName].length;i++ ){
                               msg+='<li>'+errors['errors'][fieldName][i]+'</li>';
                           }
                           msg+='</ul>';

                           inputField.after().append('<div class="error">'+msg+'</div>');//display the error message below the field.
                       }

                   }
               });//end of ajax method
       }//end of if statement
    });//end of form submit function

从done()函数上面的ajax调用的函数

/*Function to display recently inserted user's information*/
    function showUserInformation(id){
        console.log('id:'+id);
        $.ajax({
            method:'GET',
            url:'./userinfo',
            data:{id:id}
        })
        .done(function(data){
            console.log(JSON.stringify(data));
            console.log(data);
            $('.container-fluid').empty().html(data);
        })
        .fail(function(res){
            console.log(JSON.stringify(res));
        })//end of ajax method
    }

如果有人能帮我解决这个问题,我将非常感谢。提前感谢你。

1 个答案:

答案 0 :(得分:1)

保存信息后,您不需要再进行一次Ajax调用。保存时,只需从控制器返回新的用户信息作为JSON。然后,您可以在AJAX .done部分中解析JSON并显示您需要的位置。