Question

我想使用JavaScript和HTML向JSON URL添加一些对象。我有一个外部URL，我可以读取文件，但不能在其中添加对象！我写了这段代码，但它似乎不起作用！请帮忙。

HTML代码仅包含我要向您显示的div

//JavaScript: There is the javascript code    
    
var btnAjouter = document.getElementById("btn-ajouter");
var formData = document.getElementById("form").value;

if(btnAjouter){

  btnAjouter.addEventListener("click", function(){       
    var postData = {
      "prenom": document.getElementById("prenom").value,
      "nom": document.getElementById('nom').value,
      "ville": document.getElementById("ville").value    
    } 

    var creerPost = new XMLHttpRequest();
    creerPost.open("POST", "liste_membres.json");
    creerPost.send(JSON.stringify(postData));    

  });
}

<div class=" box-header">
    
  <h1>Ajouter un membre</h1>

  <h2>Remplissez le formulaire ci-dessous</h2>
  <form id="form">
    <div class="form-group">
      <label for="exampleFormControlInput1">Prénom: </label>
      <input type="text" id="prenom" name="prenom" class="form-control" required="('Vous devez entrer un prénom.')">
    </div>
    <div class="form-group">
      <label for="exampleFormControlSelect1">Nom de famille: </label>
      <input type="text" id="nom" name="nom" class="form-control" required="('Vous devez entrer un nom de famille.')">

    </div>
    <div class="form-group">
      <label for="exampleFormControlSelect2">Ville de naissance: </label>
      <input type="text" id="ville" name="ville" class="form-control" required="('Vous devez entrer une ville de naissance.')">

    </div>
    <div class="form-group">
      <button id="btn-ajouter">Ajouter</button>
    </div>
  </form>
</div>

我想使用JavaScript和HTML向JSON URL添加一些对象。我有一个外部URL，我可以读取文件，但不能在其中添加对象！我写了这段代码，但它似乎不起作用！请帮忙。****

Answer 1

尝试使用FormData类：https://developer.mozilla.org/de/docs/Web/API/FormData

//JavaScript: There is the javascript code    

var btnAjouter = document.getElementById("btn-ajouter");
var formData = document.getElementById("form").value;

if(btnAjouter){

  btnAjouter.addEventListener("click", function(){       
    var postData = new FormData(document.getElementById("form"));

    var creerPost = new XMLHttpRequest();
    creerPost.open("POST", "liste_membres.json");
    creerPost.send(postData);    

  });
}

但是我真的不认为您选择了正确的终点。为什么要将数据发送到json文件？

我无法在API的json URL文件中发布元素

1 个答案: