He estado intentando durante horas hacer que esto funcione. Estoy tratando de agregar el texto del Título y el texto del Contenido a un archivo .json. He visto muchos problemas similares aquí pero con php y no puedo usarlo (regla del maestro).
Intenté Fetch API pero descubrí que solo maneja las solicitudes de obtención de archivos json. Sin embargo, solo encontré funciones ajax aquí donde usan $ delante de ellas.
Simplemente no sé cómo incluir la ubicación del archivo json sin usar php. archivo de nombre = publicaciones.json. Ejemplo dentro de json: Imagen json
Este es mi código JS:
let form = document.getElementById('frm'); form.addEventListener('submit', PostBlog) function PostBlog(){ let title = document.getElementById("txtTitle"); let content = document.getElementById("txtContent"); let data = {title1: title.value} //let url = new URL("http://localhost:8080/admin.html"); //let parms = new URLSearchParams({title1: title.value, content1: content.value}); fetch("http://localhost:8080/admin.html", { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data), } ).then(receive).then(response => response.text()).then(Succeed).catch(problem) } function receive(response) { if(!(response.ok)){ throw new Error("Didn't Receive " + response.status); } return response; } function problem(error){ alert("Not Found " + error); } function Succeed(data){ alert("Found " + data); }Parte importante de HTML:
<form id="frm"> <div class="form-group"> <label for="txtTitle">Title</label> <input type="text" class="form-control" id="txtTitle"> </div> <div class="form-group"> <label for="txtContent">Content</label> <textarea class="form-control" id="txtContent" rows="3"></textarea> </div> <div class="form-group"> <button type="submit" class="btn btn-primary">Submit</button> <button type="reset" class="btn btn-primary">Reset</button> </div> </form>Y finalmente una foto del sitio.
Ajax es un término que significa "Hacer una solicitud HTTP desde JavaScript, ejecutándose en el navegador, sin salir de la página".
No puede usarlo para escribir directamente en los datos del servidor, porque los navegadores no pueden simplemente escribir en los servidores. Si eso fuera posible, la página de inicio de Google sería destrozada 30 veces por segundo.
Necesita un proceso del lado del servidor para tomar la solicitud HTTP y escribir los datos en el archivo (aunque una base de datos suele ser una mejor opción, ya que solucionará problemas como las escrituras simultáneas). Si no desea utilizar PHP, puede utilizar cualquier otro lenguaje de programación del lado del servidor que admita el servidor. Si no desea utilizar ninguno de ellos, puede cambiar su servidor a uno que admita el idioma que desea utilizar.
Intenté Fetch API pero descubrí que solo maneja las solicitudes de obtención de archivos json.
La API Fetch se puede utilizar para realizar más o menos cualquier tipo de solicitud con cualquier tipo de carga útil y cualquier tipo de respuesta.
Sin embargo, solo encontré funciones ajax aquí donde usan $ delante de ellas.
Los navegadores tienen dos API para realizar solicitudes Ajax. XMLHttpRequest y Fetch. (Fetch es más reciente).
Existen numerosas bibliotecas de terceros que envuelven XMLHttpRequest y/o Fetch para proporcionar API alternativas. $ es la variable a la que comúnmente se asigna jQuery. Su principal función auxiliar de Ajax se puede encontrar en la propiedad ajax .
El uso de una biblioteca de terceros no resolverá el problema de que los navegadores no pueden escribir en los servidores.