Question

我想要HTML上的一个按钮，通过使用AJAX非常简单的代码来更改某些页面的内容，但是当我尝试更改它时，它根本无效，它说：

" video.js:20 Failed to load file:///C:/xampp/htdocs/Rain%20Oficial/texto_prueba.txt: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."

我是通过一个教程创建的，它在.txt文件中创建并使页面显示.txt中包含的内容但是我试图替换HTML标记的.txt文件，其中我链接yotube视频与html youtube工具，但即使教程示例也没有在这里工作视频：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/Inicio.css">
    <link rel="stylesheet" href="css/fonts.css">
    <link rel="icon" href="">
    <title>Rain | Inicio</title>
</head>
<body>

    <header class="main">
        <!--a class="logo-header" href="https://cdn.pixabay.com/photo/2016/10/16/16/32/drop-of-water-1745699_960_720.png"-->
        <span class="site-name"><h1><a href="Inicio.html">rain</a></h1></span>
            <span class="site-desc">Pocos Botones, Dias Memorables</span>
        </a>
      </header>

    <div class="Prin">


        <center><h1 class="titulo">¿Qué es Rain?</h1></center>

        <p class="descrip">Mientras que para acceder a las demás redes sociales o foros, estos requieren ingresar datos personales y completar formularios tediosos, <font color="#5769b4"><b>Rain</b></font> ofrece a sus Usuarios un sistema de foro simplificado y seguro para sus usuarios, no tengan problemas con la privacidad, ni tengan que acostumbrarse a una interfaz complicada, de esta manera es como en nuestra Página Web cumplimos con nuestro lema: <br><br><font color="#365886"><b>Pocos botones,</b></font> <b><font color="#835ebe">Días memorables.</font></b></p>

        <button id="cargar" value="cargar">¿Interesado/a en nuestro video promocional?</button>

    </div>

    <!--Div que funciona cuando el usuario interactue por medio de AJAX-->
    <div class="Prin-video">
    </div>

     <ul class="butt">
            <li><span class="icon-droplet"></span><a href="Formulario.html">Inicia Sesión</a></li>
            <li><span class="icon-profile"></span><a href="Registrarse.html">Registrarse</a></li>                    
        </ul>

         <ul class="butt-res">
            <li><span class="icon-droplet"></span><a href="Formulario.html">Inicia Sesión</a></li>
            <li><span class="icon-profile"></span><a href="Registrarse.html">Registrarse</a></li>                    
        </ul>

    <script src="js/video.js"></script>
    </body>
</html>




            '/*jslint devel: true */
        var btnCargar = document.getElementById('cargar');


        function cargarContenidoAjax() {
            'use strict';

            var xhr = new XMLHttpRequest();


        xhr.open("GET", "texto_prueba.txt", true);
        xhr.onreadystatechange = function () {
            console.log(xhr.readyState);
            if (xhr.readyState === 4 && xhr.status === 200) {
                var contenido = document.getElementById('Prin');
                contenido.innerHTML = xhr.responseText;
            }

        };
        xhr.send();
    }



    btnCargar.addEventListener('click', cargarContenidoAjax);'

https://www.youtube.com/watch?v=t8oXTtEsm3k

Answer 1

对代码进行少量更改，例如

xhr.open("GET", "http://localhost/Rain Oficial/texto_prueba.txt", true);

它会正常工作

HTML AJAX方法不起作用

1 个答案: