Laravel中AJAX获取数据后input赋值显示undefined问题求助

问题分析 #

你遇到的核心矛盾是alert(value.title)能正常输出值，但$('#title').val(value.title)却给输入框赋值成undefined，结合你的代码来看，问题大概率出在$.each的使用逻辑上，同时还有一个语法错误需要修正。

具体修复步骤 #

1. 检查后端返回的data结构，移除不必要的$.each循环
   如果你的后端接口返回的是单个用户/分类对象（比如格式是{"title": "管理员", "editRoute": "/users/1/edit"}），那完全不需要用$.each遍历——这个方法是用来遍历数组或对象的属性的，遍历单个对象的属性时，value会变成对象的属性值（比如第一次循环value就是"管理员"这个字符串，而非用户对象），这时候value.title自然是undefined。

   修改后的JS代码：

   /* When click show user */
   // 把ajaxSetup提到全局，不用每次点击都设置
   $.ajaxSetup({
     headers: {
       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
     }
   });
   
   $(document).on("click", '#edit', function() {
     var userURL = $(this).data('url');
   
     $.get(userURL, function(data) {
       $('#staticBackdrop').modal('show');
       // 直接用data对象赋值，无需循环
       $('#title').val(data.title);
       // 修正：form的属性是action，不是actions
       $('#edit_forms').attr('action', data.editRoute);
     })
   });
   

2. 如果后端返回的是数组格式
   如果接口返回的是包含单个对象的数组（比如[{"title": "管理员", "editRoute": "/users/1/edit"}]），直接取数组第一个元素赋值即可：

   $.get(userURL, function(data) {
     $('#staticBackdrop').modal('show');
     const targetData = data[0];
     $('#title').val(targetData.title);
     $('#edit_forms').attr('action', targetData.editRoute);
   })
   

3. 额外检查项

   • 确认页面中只有一个id="title"的输入框，避免重复id导致赋值到错误元素上；
   • 打开浏览器控制台（F12），在$.get回调里添加console.log(data)，查看返回数据的实际结构，确保data.title确实存在且有值。

内容的提问来源于stack exchange，提问作者Aaron