Question

我正在尝试使用HTML代码中来自表单的数据向rest API发出发布请求。我希望在单击“提交”按钮时将表单过帐，但是当我单击“提交”时，什么也没有发生。谁能帮我解决为什么不起作用？

如果可能的话，我想避免使用jQuery。

任何帮助，我们都会感激

我的表单：

    <form id="input_form">Please enter details:
        <label for="name">Name: <input type="text" name="name" value="Name"></label>
        <label for="age">Age: <input type="text" name="age" value="Age"></label>

        <input type="submit" id="submit_button" value="Add User">
    </form>

我的Javascript：

    const processResponse = function() {
        let response = JSON.parse(this.response);
        console.log(response);
    };

    const encodeParameters = function(params) {
        var strArray = [];
        Object.keys(params).forEach(function(key) {
            var paramString = encodeURIComponent(key) + "=" +                    encodeURIComponent(params[key]);
            strArray.push(paramString);
        });
        return strArray.join("&");
    };

    const makeAPIQuery = function(name, barcode) {
        let rootURL = "somewhere";

        let params = {
            name: name,
            age: age
        };

        let queryURL = rootURL + "?" + encodeParameters(params);
        console.log(queryURL);

        let xhttp = new XMLHttpRequest();
        xhttp.addEventListener("load", processResponse);
        xhttp.open("POST", queryURL, true);
        xhttp.send();
    };

    let submitButton = document.getElementById("submit_button");
    submitButton.addEventListener("click", function() {
        let name = document.getElementById("name").value;
        console.log(name);
        let barcode = document.getElementById("age").value;
        console.log(age);

        if (name && age) {
            makeAPIQuery(name, age);
        }
    });

Answer 1

首先，没有id元素，您尝试使用document.getElementById检索具有name属性的元素，因此将name属性更改为id，其次是使用ajax提交表单您需要使用e.preventDefault

阻止默认行为

const processResponse = function() {
  let response = JSON.parse(this.response);
  console.log(response);
};

const encodeParameters = function(params) {
  var strArray = [];
  Object.keys(params).forEach(function(key) {
    var paramString = encodeURIComponent(key) + "=" + encodeURIComponent(params[key]);
    strArray.push(paramString);
  });
  return strArray.join("&");
};

const makeAPIQuery = function(name, age) {
  let rootURL = "somewhere";

  let params = {
    name: name,
    age: age
  };

  let queryURL = rootURL + "?" + encodeParameters(params);
  console.log(queryURL);

  let xhttp = new XMLHttpRequest();
  xhttp.addEventListener("load", processResponse);
  xhttp.open("POST", queryURL, true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send();
};

let submitButton = document.getElementById("submit_button");
submitButton.addEventListener("click", function(e) {
  e.preventDefault()
  let name = document.getElementById("name").value;
  console.log(name);
  let age = document.getElementById("age").value;
  if (name && age) {
    makeAPIQuery(name, age);
  }
});

<form id="input_form">Please enter details:
  <label for="name">Name: <input type="text" id="name" value="Name"></label>
  <label for="age">Age: <input type="text" id="age" value="Age"></label>

  <input type="submit" id="submit_button" value="Add User">
</form>

使用JavaScript发出发布请求

1 个答案: