GET http://localhost:8005/context.blade.php 404（未找到）

Question

单击按钮后，我想用 context.blade.php 文本替换 ajax.blade.php 文本。当我按下按钮时，发生了错误。

**app.js file:**

    function replaceText(){
    let xhr = new XMLHttpRequest();
    let target = document.getElementById("text");
    xhr.open('GET' , 'context.blade.php' , true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 2) {
                target.innerHTML = 'Loading...';
            }
            if (xhr.readyState == 4 && xhr.readyState === 200) {
                target.innerHTML = xhr.responseText;
            }
        }
      xhr.send();
    }
    let button = document.getElementById('ajax-button');
    button.addEventListener("click",replaceText);

ajax.blade.php 文件：

@extends('layout.app')
<h1 id="text">Hello Original Text </h1>
<button type="button" id="ajax-button">Change</button>

context.blade.php 文件：

@extends('layout.app')
<h1>Ajax change text</h1>

AjaxController：

class AjaxController extends Controller
{
    public function ajax(){
        return view ('ajax');
    }
    public function ajaxContent(){
    return view('context');
    }
}

路线：

Route::get('/ajax','AjaxController@ajax');
Route::get('/ajaxContent','AjaxController@ajaxContent');

Answer 1

为什么要将请求发送到端点'context.blade.php'

根据您的 Route 文件，它不应该是这样的：

xhr.open('GET' , 'ajaxContent' , true);

代替：

xhr.open('GET' , 'context.blade.php' , true);

还有这个：

let button = document.getElementById('ajax-button');
button.addEventListener("click",replaceText);

必须在里面：

    if (xhr.readyState == 4 && xhr.readyState === 200) {
        target.innerHTML = xhr.responseText;
        let button = document.getElementById('ajax-button');
        button.addEventListener("click",replaceText);
    }

因为请求是异步，并且在执行后立即分配它是行不通的。

xhr.open(method , url , async);

基于MDN 文档

如果您需要加载上下文，您可以创建另一个端点：

Route::get('/ajaxContent','AjaxController@ajaxContent');

在控制器中：

AjaxController extends Controller {
    public function ajaxContent() {
        return view('context');
    }
}

请记住，这是一个过于简单的示例，您可以在 GET 请求中传递参数并根据您发送的参数在服务中验证它们。