在Laravel 8中，如何使用输入的值在不刷新页面或提交表单的情况下在同一页上呈现特定内容

<input type="text" id="inputValue" />

<div id="result"></div>

<script>
    // 监听输入值的变化
    document.getElementById('inputValue').addEventListener('input', function() {
        // 发送AJAX请求
        var inputValue = this.value;
        var url = '/process-input';
        var xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onreadystatechange = function() {
            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                // 获取后端返回的特定内容并插入到页面
                var result = xhr.responseText;
                document.getElementById('result').innerHTML = result;
            }
        };
        xhr.send('inputValue=' + encodeURIComponent(inputValue));
    });
</script>

// 定义后端路由
Route::post('/process-input', 'InputController@processInput');

// InputController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class InputController extends Controller
{
    public function processInput(Request $request)
    {
        // 获取输入的值
        $inputValue = $request->input('inputValue');

        // 根据输入值进行处理，生成特定内容
        $result = '根据输入值生成的特定内容：' . $inputValue;

        // 返回特定内容
        return $result;
    }
}