在AJAX和LARAVEL中变得未定义

时间:2019-04-15 06:58:55

标签: php ajax laravel

在从laravel和ajax试验中获取数据时出现不确定的问题。

这是我的ajax

var data = $(this).serialize();
$.ajax({
    url: "{{ route('ajaxdata.getactivities') }}",
    type: "GET",
    datatType: 'json',
    data: data,
    cache: false,
    processData: false,
    error: function (data) {
        console.log('AJAX call Failed');
    },
    success: function (data) {
        console.log('AJAX call success');
        $('#test').append('Add' + data.id); //data.id is showing undefined. if it is only data it doesnt show anything but AJAX call success
    },
});

这是我的路线

Route::get('ajaxdata/getactivities', 'AjaxdataController@getactivities')
    ->name('ajaxdata.getactivities');

这是我的控制器功能

function getactivities()
{
    $activities = Activity::orderby('id', 'asc')->get();

    return view('student.ajaxdata', compact('activities'));
}

5 个答案:

答案 0 :(得分:1)

您的控制器中的orderby中有错字:

$activities = Activity::orderBy('id','asc')->get();

而ajax不返回视图,请尝试:

return compact('activities');

来自响应的数据也是活动数组,您不能获取数组的id。尝试使用data[0].id

答案 1 :(得分:1)

enter image description here让我们重写整个内容

var data = $(this).serialize();
        $.ajax({
            url: "{{ route('ajaxdata.getactivities') }}",//if this page 

// does not end with something.blade.php, it will not render your url, i.e if you have seperate .js file, consider rewriting this line, probably like so
   // $url=$(this).attr('action');
            type:"GET",
            datatType : 'json',
            data: data,

            error: function (data)
      {
        console.log('AJAX call Failed');
      },
        success: function(data)
      {
        console.log('AJAX call success');
        $('#test').append('Add' + data.id); //data.id is showing undefined. if it `is only data it doesnt show anything but AJAX call success`
    },
        })

看起来您想返回视图,您需要像这样渲染它

function getactivities()
    {    
    $activities = Activity::orderBy('id','asc')->get();
    $data=view('student.ajaxdata', compact('activities'))->render();
return response()->json(['html'=>$data]);
    }

并以

的身份成功访问它
console.log(data.success)// this will return the page with the value and not the values alone.

但是如果您不想返回页面,则可以像这样

function getactivities()
{    
$activities = Activity::orderBy('id','asc')->get();
//return view('student.ajaxdata', compact('activities'));
return response()->json(['$data'=>$activities]);
//remember the data returned here is a collection since you are using a `get() method, you cannot do data.id in your ajax without iterating over it, if you plan to return just a row, then rewrite this line`
$activities = Activity::orderBy('id','asc')->first();
}

并以相同的方式成功访问ajax。

    console.log(data)

$data: Array(3)
0:
ActionDescription: ""
ActivityDate: "0000-00-00"
ActivityID: "1"
ActivityName: "Training"
ActivityTime: "00:00:00"
ActivityTypeID: ""
Location: "Moa"
QRCode: ""
created_at: null
event_id: 1
id: 1
updated_at: null
__proto__: Object
1: {id: 3, ActivityName: "Bruno", Location: "NY", ActionDescription: "A", ActivityDate: "0000-00-00", …}
2:
ActionDescription: "Training"
ActivityDate: "0000-00-00"
ActivityID: null
ActivityName: "Bad Blood"
ActivityTime: "12:00:00"
ActivityTypeID: null
Location: "SM Trinoma"
QRCode: null
created_at: "2019-04-11 05:38:30"
event_id: 2
id: 2
updated_at: "2019-04-11 05:38:30"
__proto

答案 2 :(得分:1)

您可以尝试仅记录数据吗?

Activity::orderBy('id','asc')->get()可能正在此处返回收集数据,因此日志数据要比下面的成功操作要好:

`success: function (data) {
    { 
        $.each(data, function() 
        { 
            console.log(data);  //shows the data in array 
            $('#test').append('Add' + data.id); }); 
        }
    }`

答案 3 :(得分:1)

使用$ .each的所有麻烦都无法用于循环数据,因此我用于输出数据。这是我的工作代码

$(document).ready(function() {
    var data = $(this).serialize(); 
    $.ajax({ url: "{{ route('ajaxdata.getactivities') }}", 
    method: "get",
    dataType:"JSON", 
    data: data, 
    // cache: false, 
    // processData: false, 
    success: function (data) 
    { 
        $.each(data,function(key,value) { 

            for(var x=0; x < value.length; x++){
            console.log(value[x].ActivityName);

            $('#activities').append($('<option>', {value:value[x].id, text:value[x].ActivityName}));
           }
        })
      }, 
   });
});

答案 4 :(得分:0)

问题是,您正在发送视图(刀片文件)而不是数据。 发送json格式的数据,您可以轻松使用javascript访问数据。 为什么不使用return response()->json(['status'=>200,'payload'=>$ourdata]); 而且orderby就像orderBy

喜欢以下内容

$activities = Activity::orderBy('id','asc')->get(); return response()->json(['status'=>200,'payload'=>$activities]);