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'

基于您的路线文件，应该不是这样的

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请求中传递参数，并根据发送的参数在提供的服务中对其进行验证。

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

1 个答案: