Могу ли я опубликовать JSON без использования AJAX?

Question

У меня есть некоторые данные, скажем:

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

Я хочу отправить это на сервер, используя туда-обратно (иначе, не ajax).

Я знаю, что это возможно,но я не могу найти литературу по этому вопросу.Идеи?

(я использую jQuery, если это облегчает задачу)

РЕДАКТИРОВАТЬ: хотя все эти ответы пока отвечают на вопрос, я должен был включить, что я хочу "тип контента"of" application / json "

Answer 1

1. Создание HTML-формы с уникальным атрибутом «id».Вы можете скрыть это используя CSS "display: none".Также заполните атрибуты действия и метода.
2. Добавьте в форму поле ввода text или hidden.убедитесь, что вы даете ему значимый атрибут name.Это имя, по которому сервер будет получать данные.
3. Используя JQuery (или простой старый javascript), скопируйте переменную "dat" в поле ввода
4. Отправьте форму, используя скрипт

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 значению ввода внутри тега формы, чтобы он мог отправить POST на сервер (либо пользователем, отправляющим форму, либо программным нажатием кнопки отправки).

В качестве альтернативы из javascript вы можете использовать window.location для отправки переменной как части запроса GET.

Answer 5

В другом ответе кто-то упомянул рабочий чертёж W3, который сейчас устарел, и более новая версия документа говорит, что мы можем использовать атрибут 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}

Я не могу скопировать весь документ здесь, поэтому посмотрите документ , чтобы узнать, как создавать более сложные объекты, используя записи массива и разбирая массивы в именах полей ввода.

Чтобы создать форму из вашего объекта, вы должны сделать серию входных элементов, которые производят тот же объект 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.