zoukankan      html  css  js  c++  java
  • [HTML 5] Transforming FormData for the Server (URLSearchParams)

    const app = document.getElementById('app');
    app.innerHTML = `
      <h1>JavaScript DOM</h1>
      <form name="order">
        <label>
          Your name
          <input type="text" name="fullname">
        </label>
        <label>
          Which pizza would you like?
          <select name="pizza">
            <option value="pepperoni">Pepperoni</option>
            <option value="meaty">Meaty</option>
            <option value="cheesey">Cheesey</option>
          </select>
        </label>
        <div>
          What size?
          <label>
            Small
            <input type="radio" name="size" value="small" checked>
          </label>
          <label>
            Medium
            <input type="radio" name="size" value="medium">
          </label>
          <label>
            Large
            <input type="radio" name="size" value="large">
          </label>
        </div>
        <label>
          Quantity
          <input type="number" name="quantity" value="1">
        </label>
        <button type="submit">
          Submit
        </button>
      </form>
    `;
    
    const form = document.forms.order;
    
    function handleSubmit(event) {
      event.preventDefault();
      const formData = new FormData(event.target);
    
      // query string
      // Content-Type = application/x-www-form-urlencoded
      // fullname=Todd%20Motto&pizza=pepperoni&size=large&quantity=2
      // const data = [...formData.entries()];
      // const asString = data
      //   .map(x => `${encodeURIComponent(x[0])}=${encodeURIComponent(x[1])}`)
      //   .join('&');
    //. or using URLSearchParams
    const asString = new URLSearchParams(formData).toString(); console.log(asString); // json const asJSON = JSON.stringify(Object.fromEntries(formData)); console.log(asJSON); } form.addEventListener('submit', handleSubmit);
  • 相关阅读:
    pycharm搭建Django项目
    记一次坑爹的Rocketmq排错
    vue关于编辑框的表单变化判断
    PostgreSQL创建空间数据库
    PostgreSQL查询集合结果用逗号分隔返回字符串
    sqoop 抽取 postgres 数据库的数据
    Hive插入parquet格式进行压缩
    python通过kylin的api调度cube
    python的while例子
    numpy和pandas 小计
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13159361.html
Copyright © 2011-2022 走看看