Отправьте измененный json из вида в контроллер - PullRequest
Новая
       10

Отправьте измененный json из вида в контроллер

1 голос
/ 19 марта 2020

На данный момент у меня есть редактируемая таблица, созданная из начального json с функцией javscript. В этой таблице можно изменить каждое поле json. В настоящее время я ищу способ передать этот отредактированный пользователем json после нажатия кнопки. Проблема в том, что я никогда не делал Ajax звонок ...

Прежде всего, это мой взгляд: 

{% extends 'default/index.html.twig' %} 
{% block content %}
    <div class="json-view">   <!-- here is where I print my table -->

    </div>
{% endblock %}
{% block javascripts %}
    // Here is where I execute all the function below
{% endblock %}

Это мой стартовый json: 

[{"a" : 0, "b" : 7, "c": "/", "d" : 5, "e" : "/", "f" : 5,  "g" : "/"},
{"a" : 0.1, "b" : 15, "c": 30, "d" : 10, "e" : 30, "f" : 10,  "g" : 30},
{"a" : 0.2, "b" : 15, "c": 30, "d" : 10, "e" : 30, "f" : 10,  "g" : 30},
{"a" : 0.3, "b" : 15, "c": 30, "d" : 10, "e" : 30, "f" : 10,  "g" : 30},
{"a" : 0.4, "b" : 15, "c": 30, "d" : 10, "e" : 30, "f" : 10,  "g" : 30},
{"a" : 0.5, "b" : 15, "c": 30, "d" : 10, "e" : 30, "f" : 10,  "g" : 30},
{"a" : 0.6, "b" : 20, "c": 30, "d" : 20, "e" : 30, "f" : 15,  "g" : 30},
{"a" : 0.7, "b" : 20, "c": 30, "d" : 20, "e" : 30, "f" : 15,  "g" : 30}]

Это функция javascript, которую я использовал для создания редактируемой таблицы: 

function jsonToTable(json, opts={}) {
  let headers = Object.keys(json[0]);
  let table = document.createElement('table');
  let thead = document.createElement('thead');
  let tbody = document.createElement('tbody');
  let thead_tr = document.createElement('tr');
  if (opts.class) table.classList.add(opts.class);
  headers.forEach(header => {
    let th = document.createElement('th');
    th.textContent = header;
    thead_tr.appendChild(th);
  });
  json.forEach(record => {
    let tr = document.createElement('tr');
    headers.forEach(field => {
      let td = document.createElement('td');
      td.textContent = record[field];
      td.setAttribute('contenteditable', true);
      tr.appendChild(td);
    });
    tbody.append(tr);
  });
  thead.appendChild(thead_tr);
  table.appendChild(thead);
  table.appendChild(tbody);
  return table;
}

И эта функция используется для возврата отредактированного значения из table: 

function tableToJson(table, options={}) {
  let fields = Array.from(table.querySelectorAll('thead tr th')).map(th => th.textContent);
  return Array.from(table.querySelectorAll('tbody tr')).map(tr => {
    return Array.from(tr.querySelectorAll('td')).reduce((record, td, index) => {
      return Object.assign(record, { [fields[index]] : formatValue(td.textContent) });
    }, {});
  });
}

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

Есть ли способы сделать это с Ajax звонок или что-то еще?

Заранее спасибо!

1 Ответ

0 голосов
/ 23 марта 2020

Конечно, вы можете! Это вызов ajax: 

$.ajax({
  url : "path('ajax_call_for_table')",
  type: "POST",
  data : table_data,
  success: function() { // some code on success }
});

Где table_data - это данные, которые вы хотите изменить.

Затем вам нужно создать метод в вашем контроллер для обработки этого ajax вызова: 

/**
 * @Route("/ajax/table-data", name="ajax_call_for_table")
 * @Method("POST")
 */
public function setTableData(Request $request)
{
    if ($request->isXmlHttpRequest()) { // <- Check that is an ajax call
        $em = $this->getDoctrine()->getManager();

        $table_data = $request->request->get('table_data'); // <- Get the *data* of ajax

        /** Do something with this data */

        return new Response();
    }
}

Обратите внимание, что имя этого метода должно совпадать с именем, используемым в вызове url из ajax.

Извините, мой английский.

...