javascript - 如何将 HTML 表单(JSON 格式)中的数据分配给变量?

标签 javascript html json

在我的 abc.html 中,我有以下代码,它将表单数据(目前为硬编码)转换为 JSON 格式:

    <body>
    <form enctype='application/json' method="POST" name="myForm">

    <p><label>Company:</label>
    <input name='Company' value='TESTCOMPANY'> </p>

    <p><label>User Id:</label>
    <input name='User' value='TESTUSER'></p>

    <p><label>Division:</label>
    <input type="text" name='parameterMap[p1]' value='12345' ></p>

    <p><label>From:</label>
    <input type="text" name='parameterMap[p2]' value='20-MAR-2016'></p>

    <p><label>To:</label>
    <input type="text" name='parameterMap[p3]' value='22-MAR-2016'></p>

    <input value="Submit" type="submit" onclick="submitform()">
    </form>
    </body>

从上面的代码我得到*

{"Company":"TESTCOMPANY","User":"TESTUSER","parameterMap":{"p1":"12345","p2":"20-MAR-2016","p3":"22-MAR-2016"}}*

现在我需要将此数据形成的 Json 字符串分配给变量“FormData”,以便 FormData 如下:

FormData = '{"Company":"TESTCOMPANY","User":"TESTUSER","parameterMap":{"p1":"12345","p2":"20-MAR-2016","p3":"22-MAR-2016"}}'

如何进行数据分配?

abc.html 中的进一步代码将按以下方式使用此变量 FormData:

function sendAjax() {

    $.ajax({
        url : "myurl",
        type : 'POST',
        dataType : 'json',
        data : FormData,
        contentType : 'application/json',
        mimeType : 'application/json',
        success : function(data) {
            alert(data.uuid);
        },
        error : function(data, status, er) {
            alert("error: " + data + " status: " + status + " er:" + er);
        }
    });
    }

最佳答案

如果您不在后端处理此问题,您可以在变量中检索 Javascript 中的数据,然后使用 JSON.stringify() 将其作为 JSON 应用到您的数据中。

这是一个工作片段:

    function submitform() {
      var FormData = {
        Company: myForm.Company.value,
        User: myForm.User.value,
        parameterMap: {
          p1: myForm.p1.value,
          p2: myForm.p2.value,
          p3: myForm.p3.value
        }
      };
      console.log(FormData);

      $.ajax({
        url: "myurl",
        type: 'POST',
        dataType: 'json',
        data: JSON.stringify(FormData),
        contentType: 'application/json',
        mimeType: 'application/json',
        success: function(data) {
          alert(data.uuid);
        },
        error: function(data, status, er) {
          alert("error: " + data + " status: " + status + " er:" + er);
        }
      });
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype='application/json' method="POST" name="myForm">

  <p>
    <label>Company:</label>
    <input name='Company' value='TESTCOMPANY'>
  </p>

  <p>
    <label>User Id:</label>
    <input name='User' value='TESTUSER'>
  </p>

  <p>
    <label>Division:</label>
    <input type="text" name='p1' value='12345'>
  </p>

  <p>
    <label>From:</label>
    <input type="text" name='p2' value='20-MAR-2016'>
  </p>

  <p>
    <label>To:</label>
    <input type="text" name='p3' value='22-MAR-2016'>
  </p>

  <input value="Submit" type="submit" onclick="submitform()">
</form>

注释:

使用Javascript naming conventions ,例如 FormData 最好是 formData

关于javascript - 如何将 HTML 表单(JSON 格式)中的数据分配给变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37026290/

相关文章:

javascript - HTML5/CSS : How do you create pixelated text (upscale with sharp edges)

javascript - 如何避免jquery删除斜线?

html - CSS 多文本装饰

python - 从 Python 编写嵌套的 Parquet 格式

javascript - 在 Cordova/Phonegap 中使用 Google API javascript

javascript - 如何获取没有有效字段的对象?

html - 部分 ID 禁用引导导航栏下拉菜单 - 为什么?

json - 如何用sed删除前一行的最后一个字符

javascript - 将 JSON 对象的键转换为点符号路径

javascript - 在此可变背景图像 javascript 上包含淡入(慢速)