我正在制作一個帶有帖子和帖子類別的 Laravel 8 應用程式。我現在正在處理編輯帖子表單，我需要使用帖子的當前資料預先填充它。
表中的id列是catergories表中的category_id外鍵posts。
在帖子模型中，我有：
class Posts extends Model {
use HasFactory;
protected $fillable = [
'title',
'category_id',
'description',
'body'
];
}
路線是Route::get('/dashboard/posts/edit/{id}', [PostsController::class, 'editPost'])。
控制器中的editPost方法：
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Posts;
class PostsController extends Controller {
// More code
public function editPost($id) {
$post = Posts::select (
"posts.id",
"posts.title",
"posts.description",
"posts.body",
"catergories.name as category_name"
)
->leftJoin("catergories", "posts.category_id", "=", "catergories.id")
->where('posts.id', $id)
->first();
echo $post->title . '<br>';
echo $post->category_name . '<br>';
}
}
在表格中：
<input type="hidden" id="post_id" value="">
<div class="form-group mb-2 @error('title') has-error @enderror">
<label for="title" class="text-muted">Title</label>
<input id="title" type="text" name="title" placeholder="Title" value="{{ old('title', $post->title) }}" hljs-built_in">error('title') is-invalid @enderror" autofocus>
@error('title')<span hljs-built_in">error-msg">{{ $message }}</span>@enderror
</div>
<div hljs-number">2 @error('category_id') has-error @enderror">
<label for="category" hljs-string">">Category</label>
<select name="category_id" id="category" hljs-built_in">error('category_id') is-invalid @enderror">
<option value="0">Select a category</option>
@foreach($categorys as $category)
<option value="{{ $category->id }}" {{ $category->id == $post->category_id ? 'selected' : '' }}>
{{ $category->name }}
</option>
@endforeach
</select>
</div>
目標
該表單被放置在 Bootstrap 5 模式中，這意味著我無法訪問https://myapp.test/dashboard/posts/edit/1以獲取必要的資料。我必須通過 AJAX 來做到這一點。
為此，我有以下 JavaScript 函式
function populateEditForm(event, entity) {
var id = event.currentTarget.dataset.id;
var url = `/dashboard/${entity}/edit/${id}`;
console.log(url);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
if (xmlhttp.status == 200) {
console.log(xmlhttp.responseURL);
}
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
我在 Blade 模板中呼叫：
<a onclick="populateEditForm(event, 'posts')" href="#" data-id="{{ $post->id }}" title="Edit post" data-bs-toggle="modal" data-bs-target="#edit_post_modal">
<i class="fa fa-edit"></i>
</a>
問題
控制臺在控制器中正確顯示編輯方法的路徑：（https://myapp.test/dashboard/posts/edit/1對于 id 等于 1 的帖子），但我不知道如何使用它來獲取必要的資料（ $post->title、$post->category_name等）并將其傳遞給形式。
缺什么？
uj5u.com熱心網友回復：
您需要以 JSON 格式回傳回應并重新填充表單。
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Posts;
class PostsController extends Controller {
// More code
public function editPost($id) {
$post = Posts::select (
"posts.id",
"posts.title",
"posts.description",
"posts.body",
"catergories.name as category_name"
)
->leftJoin("catergories", "posts.category_id", "=", "catergories.id")
->where('posts.id', $id)
->first();
return response()->json(['post' => $post]);
}
}
在你的 JavaScript
function populateEditForm(event, entity) {
var id = event.currentTarget.dataset.id;
var url = `/dashboard/${entity}/edit/${id}`;
console.log(url);
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
if (xmlhttp.status == 200) {
console.log(xmlhttp.response);
}
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/445665.html