Question

我有一些数据，让我们说：

var dat = JSON.stringify(frm.serializeArray())

我想使用往返（又名非ajax）将其提交给服务器。

我知道这是可能的，但我找不到任何关于它的文献。想法？

（我正在使用jQuery，如果这更容易）

编辑：虽然到目前为止所有这些答案都回答了这个问题，但我应该包括我想要一个“application / json”的“内容类型”

Answer 1

创建具有唯一“id”属性的HTML表单。您可以使用CSS“display：none”隐藏它。同时填写操作和方法属性。
在表单中添加text或hidden输入字段。确保给它一个有意义的“名称”属性。这就是服务器获取数据的名称。
使用JQuery（或普通的旧javascript）将变量“dat”复制到输入字段
使用脚本

Answer 2

有一个支持所谓的HTML-JSON-FORMS的工作草案，请参阅： http://www.w3.org/TR/2014/WD-html-json-forms-20140529/

到目前为止使用ajax或将json发送到输入文本字段。

Answer 3

<form action="xxx.aspx" method="POST">
  <input type='hidden' id='dat' />

  <!-- Other elements -->
</form>

<script type='text/javascript'>
  $('#dat').val(JSON.stringify(frm.serializeArray()));
</script>

Answer 4

您需要将json字符串分配给表单标记内的输入值，以便将其发送到服务器（通过用户提交表单或以编程方式单击提交按钮）。

或者从javascript中，您可以使用window.location将变量作为GET请求的一部分发送。

Answer 5

在另一个答案中，有人提到了W3工作草案，该工作草案已经过时，newer version of the document说我们可以为表单使用enctype="application/json"属性，它将把整个表单字段作为对象的属性发送。

虽然我仍然不清楚如何发送数组，但是参考上面的文档，您可以简单地发送对象为：

<form enctype='application/json'>
  <input name='name' value='Bender'>
  <select name='hind'>
    <option selected>Bitable</option>
    <option>Kickable</option>
  </select>
  <input type='checkbox' name='shiny' checked>
</form>

// produces {"name": "Bender", "hind": "Bitable", "shiny": true}

我无法在此处复制整个文档，因此请查看the document，了解如何在输入字段名称中使用数组符号和稀疏数组来创建更复杂的对象。

要使用对象创建表单，必须创建一系列输入元素，以产生与手头相同的JSON对象。您可以手动执行操作，或者如果您的对象足够大，则可以使用代码片段将您的对象转换为所需的输入元素。我最终得到了类似下面代码的内容。您可以根据需要进行更改（例如隐藏表格，甚至生成具有不同属性类型的样式的输入字段类型，以获得真正合适的格式）

(function () {
  const json = {
    bool: false,
    num: 1.5,
    str: 'ABC',
    obj: {b:true, n: .1, s: '2', a: [1, '1']},
    arr: [
      true, 500.33, 'x', [1, 2],
      {b:true, n: .1, s: '2', a: [1, '1']}
    ]
  };

  const getFieldHTML = (value, name) => {
    if (name||name===0) switch (typeof value) {
      case 'boolean': return `<input type="checkbox" name="${name}" ${value?'checked':''}>\n`;
      case 'number': return `<input type="number" name="${name}" value="${value}">\n`;
      case 'string': return `<input type="text" name="${name}" value="${value}">\n`;
    }
    return '';
  };
  
  const getFieldsHTML = (value, name) => {
    const fields = [];
    if (value instanceof Array)
      fields.push(...value.map((itemValue, i) => 
        getFieldsHTML(itemValue, name+'['+i+']')
      ));
    else if (typeof value === "object")
      fields.push(...Object.keys(value).map(prop =>
        getFieldsHTML(
          value[prop], //value is an object
          name?(name+'['+prop+']'):prop
        )
      ));
    else
      fields.push(getFieldHTML(value, name));
    return fields.join('');
  };

  const fieldsHTML = getFieldsHTML(json);

  const frm = document.createElement('form');
  frm.enctype = 'application/json';
  frm.method = 'POST';
  frm.action = 'URL GOES HERE';
  frm.innerHTML = fieldsHTML;

  console.log(fieldsHTML);
  console.log(frm)
})();

Check your browser's console to inspect the created form DOM and its children.

我可以在不使用AJAX的情况下发布JSON吗？

5 个答案: