jQuery – przygotowanie i wysłanie danych JSON z wykorzystaniem AJAX

Pracując przy jednym z ostatnich projektów zmuszony byłem przygotować skrypt, który pobierze dane z formularza, dokona walidacji tych dancych, a na koniec prześle je jako JSON z wykorzystaniem AJAX.

W pierwszej chwili wydawało mi się, że najwięcej problemów przyspoży mi przygotowanie danych i konfersja ich do formatu JSON. Myliłem się jednak 🙂 Po pobraniu wszystkich danych z formularza wystarczyło bowiem wstawić do odpowiednio sformatowanej tablicy, a następnie wywołać metodę JSON.stringify i dane już były w porządanym formacie.

Poniżej znajduje się przykład pobierania danych z formularza umożliwiającego konfigurację filtrów JIRA i otrzymanie jej w postaci JSON:

function jiraConfig() {
  var output = new Array();
  var jsonConfig == "";

  $("#jiraConfSubmit").click(function(){
    $("#jiraConfiguration").find('input[type=text]').each(function(){
      var key = $(this).attr('name').substr(6);
      var internalArray = {};
      internalArray["filerTitle"] = $("input[name=jiraTitle"+key+"]").val();
      internalArray["filterId"] = $("input[name=jiraId"+key+"]").val();
      output.push(internalArray);
    })
    jsonConfig = JSON.stringify(output, null, 2);
  });
  return jsonConfig;
}

W wyniku działania tej funkcji uzyskamy dane w postaci JSON:

[
  {
    "filerTitle": "Issues waiting for verification",
    "filterId": "10545"
  },
  {
    "filerTitle": "Critical open bugs",
    "filterId": "11501"
  }
]

Jak widać otrzymaliśmy pięknego JSON’a. Pozostaje tylko jeszcze przesłanie go z użyciem AJAX. Tutaj z pomocą przychodzi nam jQuery, które wymaga jednak ustawienia dodatkowych parametrów:

$.ajax({
  type: 'POST',
  url: "/targetUrl",
  data: json,
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(result) {
    location.reload();
  }
});

Wywołanie metody ajax z jQuery nie różni się od standardowego wywołania. Wymaga jedynie dodania dwóch dodatkowych paramtrów:

• dataType: json – wskazuje na typ przesyłanych danych
• contentType: “application/json; charset=utf-8” – powoduje dołączenie odpowiedniego headera do żądania POST

W wywołaniu ajax pominąłem już sekcję wyświetlająca odpowiednie komunikaty w przypadku błędu. Natomiast poprawne przetworzenie żądania spowoduje przeładowanie strony.