Главная - Разное
Javascript строку Отправка JSON на сервер и получение JSON взамен, без JQuery. JSON: основы использования Послать json на сервис методом post

Как отправить Ajax’ом список объектов (List) в JSON формате

Пример 1 $(document).ready(function () { $("body").on("click", "button", function () { var product = JSON.stringify({ "Name": $("textarea").val(), "Cost": $("input").val(), }); console.log(product); $.ajax({ url: "/Products/AjaxCreate/", method: "POST", contentType: "application/json", data: product, success: function (response) { console.log(response); } }); }); });

Контроллер

Public ActionResult AjaxCreate(Product product){ return Json(new { result = "success" }, JsonRequestBehavior.AllowGet); }

Пример 2 //Сохранение накладной $("body").on("click", "button", function () { //Соберем таблицу как массив объектов var billDetails = ; $(".item").each(function () { var name = $(this).find(".name").val(); //Название var quantity = parseInt($(this).find(".quantity").val()); //Количество var price = parseFloat($(this).find(".price").val());//Цена var summ = parseFloat($(this).find(".item-summ").attr("value"));//Сумма var productId = parseFloat($(this).find(".item-id").attr("value"));//Id Товара var productSkuId = parseInt($(this).find(".item-sku-id").attr("value"));//Id Торгового предложения Товара var notRec = $(this).find(".item-not-rec").prop("checked");//Учитывать товар или нет billDetails.push({ Name: name, Quantity: quantity, Price: price, Summ: summ, ProductId: productId, ProductSkuId: productSkuId, NotRec: notRec }); }); console.log(billDetails); billDetails = JSON.stringify({ "billDetails": billDetails }); //Превратим в Стетхема //Отправим на сохранение $.ajax({ url: "/Bills/AjaxSaveInvoiceBill/", method: "POST", contentType: "application/json", data: billDetails, success: function (response) { window.location.replace("/Bills/List/"); } }); return false; });

Контроллер

Public ActionResult AjaxSaveInvoiceBill(List billDetails){ if (billDetails.Count == 0) return Json(new { result = "error", message = "В накладной нет товаров" }, JsonRequestBehavior.AllowGet); //Создадим новую приходную накладную, получим ее ID long billId = Bill.CreateBill(BillTypes.Invoice); //Теперь сохраним каждую позицию под ID новой накладной BillDetail.SaveBillDetails(billDetails, billId); return Json(new { result="success", message="Накладная успешно создана" }, JsonRequestBehavior.AllowGet); }

Ajax запрос в контроллер и получение Json ответа $(document).ready(function () { $.ajax({ url: "/Suppliers/AjaxGetSuppliersList/", method: "GET", success: function (response) { data = JSON.stringify(response.suppliers); var list = eval("(" + data + ")"); suggest_count = list.length; if (suggest_count > 0) { $(".supplier-select").empty();//Очистим список элементов //полученный список элементов добавим в селект $.each(response.suppliers, function (key, value) { $(".supplier-select").append("" + value.Name + ""); }); } } }); });

Контроллер

Public ActionResult AjaxGetSuppliersList() { List suppliers = Supplier.GetSuppliers(); return Json(new { suppliers }, JsonRequestBehavior.AllowGet); }

Отправка и получение данных в формате JSON с использованием метода POST // Sending and receiving data in JSON format using POST method // var xhr = new XMLHttpRequest(); var url = "url"; xhr.open("POST", url, true); xhr.setRequestHeader("Content-Type", "application/json"); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var json = JSON.parse(xhr.responseText); console.log(json.email + ", " + json.password); } }; var data = JSON.stringify({"email": "hey ", "password": "101010"}); xhr.send(data); Отправка принимаемых данных в формате JSON с использованием метода GET // Sending a receiving data in JSON format using GET method // var xhr = new XMLHttpRequest(); var url = "url?data=" + encodeURIComponent(JSON.stringify({"email": " ", "password": "101010"})); xhr.open("GET", url, true); xhr.setRequestHeader("Content-Type", "application/json"); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var json = JSON.parse(xhr.responseText); console.log(json.email + ", " + json.password); } }; xhr.send(); Обработка данных в формате JSON на стороне сервера с помощью PHP

Предел длины запроса HTTP Get зависит от используемого сервера и клиента (браузера) от 2kB - 8kB. Сервер должен вернуть 414 (Request-URI Too Long) статус, если URI больше, чем сервер может обрабатывать.

Примечание. Кто-то сказал, что я могу использовать имена состояний вместо значений состояния; другими словами, я мог бы использовать xhr.readyState === xhr.DONE вместо xhr.readyState === 4 Проблема в том, что Internet Explorer использует разные имена состояний, поэтому лучше использовать значения состояния.

Мне нужно отправить JSON (который я могу выполнить) на сервер и получить полученный JSON на стороне пользователя, не используя JQuery.

Если я должен использовать GET, как передать JSON в качестве параметра? Есть ли риск, что это будет слишком долго?

Если я должен использовать POST, как установить эквивалент функции onload в GET?

Или я должен использовать другой метод?

Замечание

Этот вопрос заключается не в отправке простого AJAX. Он не должен быть закрыт как дубликат.

Из этого топика вы узнаете как отправить JavaScript функции, через JSON используя PHP (сама концепция может быть применена и для других языков).

PHP, начиная с версии 5.2.0, включает функции json_encode() и json_decode(). Эти функции кодируют данные в формат JSON и декодиуют JSON в ассоциативные массивы. В json_encode() не может быть закодирована функция. В ряде случаев это чертовски неудобно.

  • Добавлен пример реализации в Zend Framework.
  • Вопрос к кармавампирам - вы знаете вариант как передать handler для создания объекта иначе?
  • Комментарий о том для чего и кому это нужно.
  • Проблема // Возьмем произвольный массив
    $foo = array(
    "number" => 1,
    "float" => 1.5,
    "array" => array(1,2),
    "string" => "bar" ,
    "function" =>
    );
    // Теперь преобразуем массив в JSON
    $json = json_encode($foo);
    // Отдадим клиенту
    echo $json; Результат {
    "number" :1,
    "float" :1.5,
    "array" :,
    "string" :"bar" ,
    "function" :"function(){return \"foo bar\";}"
    }
    * This source code was highlighted with Source Code Highlighter .

    Так как если не заключить определение функции в кавычки, т. е. не определить как строку, код не будет исполнятся. Так что в принципе jscon_encode() не годится для реализации этого функционала.

    Решение
  • Проходим по массиву который будет закодирован.
  • Проверяем кодируемое значение на предмет наличия определения функции.
  • Запоминаем значение и заменяем его уникальной меткой.
  • Кодируем измененный массив используя json_encode().
  • Заменяем уникальную метку на оригинальное значение.
  • Отдаем JSON клиенту.
  • // Обрабатываемый массив.
    $foo = array(
    "number" => 1,
    "float" => 1.5,
    "array" => array(1,2),
    "string" => "bar" ,
    "function" => "function(){return "foo bar";}"
    );

    $value_arr = array();
    $replace_keys = array();
    foreach ($foo as $key => &$value ){
    // Проверяем значения на наличие определения функции
    if (strpos($value , "function(" )===0){
    // Запоминаем значение для послудующей замены.
    $value_arr = $value ;
    // Заменяем определение функции "уникальной" меткой..
    $value = "%" . $key . "%" ;
    // Запоминаем метку для послудующей замены.
    $replace_keys = """ . $value . """ ;
    }
    }

    // Кодируем массив в JSON
    $json = json_encode($foo);

    // Полученный $json будет выглядеть так:
    {
    "number" :1,
    "float" :1.5,
    "array" :,
    "string" :"bar" ,
    "function" :"%function%"
    }

    // Заменяем метски оригинальными значениями.
    $json = str_replace($replace_keys, $value_arr, $json);

    // Отправляем клиенту.
    echo $json;

    // Клиент получит JSON такого вида:
    {
    "number" :1,
    "float" :1.5,
    "array" :,
    "string" :"bar" ,
    "function" :function(){return "foo bar" ;}
    }

    * This source code was highlighted with Source Code Highlighter .

    Теперь в полученном обьекте «function» является не строкой, а функцией. Собственно проблема решена. Если использовать это решение совместно с Prototype, то оно будет выглядеть примерно так:
    new Ajax.Request("json_server.php" , {
    method:"get" ,
    onSuccess: function(transport){
    var json = transport.responseText.evalJSON();
    alert(json.function()); // => Отобразится alert "foo bar"
    }
    });

    * This source code was highlighted with Source Code Highlighter .

    Реализация в Zend Framework: $foo = array(
    "integer" =>9,
    "string" =>"test string" ,
    "function" => Zend_Json_Expr(
    "function(){ window.alert("javascript function encoded by Zend_Json") }"
    ),
    );

    Zend_Json::encode($foo, false , array("enableJsonExprFinder" => true ));
    // it will returns json encoded string:
    {
    "integer" :9,
    "string" :"test string" ,
    "function" :function(){
    window.alert("javascript function encoded by Zend_Json" )
    }
    }

    * This source code was highlighted with Source Code Highlighter .

    Наверняка вы когда-нибудь слышали о JSON. Что же это такое? Что он может и как его использовать?

    В данном уроке мы расскажем об основах JSON и раскроем следующие пункты:

    • Что такое JSON?
    • Для чего используется JSON?
    • Как создать строку JSON?
    • Простой пример строки JSON.
    • Сравним JSON и XML.
    • Как работать с JSON в JavaScript и PHP?
    Что такое JSON?

    JSON - простой, основанный на использовании текста, способ хранить и передавать структурированные данные. С помощью простого синтаксиса вы можете легко хранить все, что угодно, начиная от одного числа до строк, массивов и объектов, в простом тексте. Также можно связывать между собой массивы и объекты, создавая сложные структуры данных.

    После создания строки JSON, ее легко отправить другому приложению или в другое место сети, так как она представляет собой простой текст.

    JSON имеет следующие преимущества:

    • Он компактен.
    • Его предложения легко читаются и составляются как человеком, так и компьютером.
    • Его легко преобразовать в структуру данных для большинства языков программирования (числа, строки, логические переменные, массивы и так далее)
    • Многие языки программирования имеют функции и библиотеки для чтения и создания структур JSON.

    Название JSON означает JavaScript Object Notation (представление объектов JavaScript). Как и представляет имя, он основан на способе определения объектов (очень похоже на создание ассоциативных массивов в других языках) и массивов.

    Для чего используется JSON?

    Наиболее частое распространенное использование JSON - пересылка данных от сервера к браузеру. Обычно данные JSON доставляются с помощью AJAX , который позволяет обмениваться данными браузеру и серверу без необходимости перезагружать страницу.

  • Пользователь нажимает миниатюру продукта в онлайн магазине.
  • JavaScript, выполняющийся на браузере, генерирует запрос AJAX к скрипту PHP, запущенному на сервере, передавая ID выбранного продукта.
  • Скрипт PHP получает название продукта, описание, цену и другую информацию из базы данных. Затем составляет из данных строку JSON и отсылает ее браузеру.
  • JavaScript, выполняющийся на браузере, получает строку JSON, декодирует ее и выводит информацию о продукте на странице для пользователя.
  • Также можно использовать JSON для отправки данных от браузера на сервер, передавая строку JSON в качестве параметра запросов GET или POST. Но данный метод имеет меньшее распространение, так как передача данных через запросы AJAX может быть упрощена. Например, ID продукта может быть включен в адрес URL как часть запроса GET.

    Библиотека jQuery имеет несколько методов, например, getJSON() и parseJSON() , которые упрощают получение данных с помощью JSON через запросы AJAX.

    Как создать строку JSON?

    Есть несколько основных правил для создания строки JSON:

    • Строка JSON содержит либо массив значений, либо объект (ассоциативный массив пар имя/значение).
    • Массив заключается в квадратные скобки ([ и ]) и содержит разделенный запятой список значений.
    • Объект заключается в фигурные скобки ({ и }) и содержит разделенный запятой список пар имя/значение.
    • Пара имя/значение состоит из имени поля, заключенного в двойные кавычки, за которым следует двоеточие (:) и значение поля.
    • Значение в массиве или объекте может быть:
      • Числом (целым или с плавающей точкой)
      • Строкой (в двойных кавычках)
      • Логическим значением (true или false)
      • Другим массивом (заключенным в квадратные скобки)
      • Другой объект (заключенный в фигурные скобки)
      • Значение null

    Чтобы включить двойные кавычки в строку, нужно использовать обратную косую черту: \" . Так же, как и во многих языках программирования, можно помещать управляющие символы и шестнадцатеричные коды в строку, предваряя их обратной косой чертой. Смотрите детали на сайте JSON .

    Простой пример строки JSON

    Ниже приводится пример оформления заказа в формате JSON:

    { "orderID": 12345, "shopperName": "Ваня Иванов", "shopperEmail": "[email protected]", "contents": [ { "productID": 34, "productName": "Супер товар", "quantity": 1 }, { "productID": 56, "productName": "Чудо товар", "quantity": 3 } ], "orderCompleted": true }

    Рассмотрим строку подробно:

    • Мы создаем объект с помощью фигурных скобок ({ и }).
    • В объекте есть несколько пар имя/значение: "orderID": 12345 Свойство с именем "orderId" и целочисленным значением 12345 "shopperName": "Ваня Иванов" свойство с именем "shopperName" и строковым значением "Ваня Иванов" "shopperEmail": "[email protected]" Свойство с именем "shopperEmail" и строковым значением "[email protected]" "contents": [ ... ] Свойство с именем "contents" , значение которого является массивом "orderCompleted": true Свойство с именем "orderCompleted" и логическим значением true
    • В массиве "contents" есть 2 объекта, представляющие отдельные позиции в заказе. Каждый объект содержит 3 свойства: productID , productName , и quantity .

    Кстати, так как JSON основан на объявлении объектов JavaScript, то вы можете быстро и просто сделать выше приведенную строку JSON объектом JavaScript:

    var cart = { "orderID": 12345, "shopperName": "Ваня Иванов", "shopperEmail": "[email protected]", "contents": [ { "productID": 34, "productName": "Супер товар", "quantity": 1 }, { "productID": 56, "productName": "Чудо товар", "quantity": 3 } ], "orderCompleted": true };

    Сравнение JSON и XML

    Во многих отношениях вы можете рассматривать JSON как альтернативу XML, по крайней мере, в сфере веб приложений. Концепция AJAX оригинально основывалась на использовании XML для передачи данных между сервером и браузером. Но в последние годы JSON становится все более популярным для переноса данных AJAX.

    Хотя XML является проверенной технологией, которая используется в достаточном количестве приложений, преимуществами JSON являются более компактный и простой для распознавания формат данных.

    Вот как будет выглядеть выше приведенный пример объекта на XML:

    orderID 12345 shopperName Ваня Иванов shopperEmail [email protected] contents productID 34 productName Супер товар quantity 1 productID 56 productName Чудо товар quantity 3 orderCompleted true

    Версия XML имеет существенно больший размер. В действительности она имеет длину 1128 символов, а вариант JSON - только 323 символа. Версию XML также достаточно трудно воспринимать.

    Конечно, это радикальный пример. И возможно создать более компактную запись XML. Но даже она будет существенно длиннее эквивалента на JSON.

    Работаем со строкой JSON в JavaScript

    JSON имеет простой формат, но создавать строку JSON вручную достаточно утомительно. Кроме того, часто нужно взять строку JSON, конвертировать ее содержание в переменную, которую можно будет использовать в коде.

    Большинство языков программирования имеют инструменты для простого преобразования переменных в строки JSON и наоборот.

    Создаем строку JSON из переменной

    JavaScript имеет встроенный метод JSON.stringify() , который берет переменную и возвращает строку JSON, представляющую ее содержание. Например, создадим объект JavaScript, который содержит сведения о заказе из нашего примера, а затем создадим из него строку JSON:

    var cart = { "orderID": 12345, "shopperName": "Ваня Иванов", "shopperEmail": "[email protected]", "contents": [ { "productID": 34, "productName": "Супер товар", "quantity": 1 }, { "productID": 56, "productName": "Чудо товар", "quantity": 3 } ], "orderCompleted": true }; alert (JSON.stringify(cart));

    Данный код выдаст:

    Обратите внимание, что метод JSON.stringify() возвращает строку JSON без пробелов. Ее сложнее читать, но зато она более компактна для передачи через сеть.

    Существует несколько способов разобрать строку JSON в JavaScript, но самый безопасный и надежный - использовать встроенный метод JSON.parse() . Он получает строку JSON и возвращает объект или массив JavaScript, который содержит данные. Например:

    var jsonString = " \ { \ "orderID": 12345, \ "shopperName": "Ваня Иванов", \ "shopperEmail": "[email protected]", \ "contents": [ \ { \ "productID": 34, \ "productName": "Супер товар", \ "quantity": 1 \ }, \ { \ "productID": 56, \ "productName": "Чудо товар", \ "quantity": 3 \ } \ ], \ "orderCompleted": true \ } \ "; var cart = JSON.parse (jsonString); alert (cart.shopperEmail); alert (cart.contents.productName);

    Мы создали переменную jsonString , которая содержит строку JSON нашего примера с заказом. Затем мы передаем данную строку методу JSON.parse() , который создает объект, содержащий данные JSON и сохраняет его в переменной cart . Остается только осуществить проверку, выведя свойства объекта shopperEmail и productName массива contents .

    В результате мы получим следующий вывод:

    В реальном приложении ваш JavaScript код будет получать заказ в виде строки JSON в AJAX ответе от скрипта сервера, передавать строку методу JSON.parse() , а затем использовать данные для отображения на странице пользователя.

    JSON.stringify() и JSON.parse() имеют другие возможности, такие как использование возвратных функций для пользовательской конвертации определённых данных. Такие опции очень удобны для конвертации различных данных в правильные объекты JavaScript.

    Работаем со строкой JSON в PHP

    PHP, как и JavaScript, имеет встроенные функции для работы с JSON строками.

    Создаем строку JSON из переменной PHP

    Функция json_encode() принимает переменную PHP и возвращает строку JSON, представляющую содержание переменной. Вот наш пример с заказом, написанный на PHP:

    Данный код возвращает абсолютно такую же строку JSON, как и в примере с JavaScript:

    {"orderID":12345,"shopperName":"Ваня Иванов","shopperEmail":"[email protected]","contents":[{"productID":34,"productName":"Супер товар","quantity":1},{"productID":56,"productName":"Чудо товар","quantity":3}],"orderCompleted":true}

    В реальном приложении ваш скрипт PHP пришлет данную строку JSON как часть AJAX ответа браузеру, где JavaScript код с помощью метода JSON.parse() преобразует ее обратно в переменную для вывода на странице пользователя.

    Вы может передавать различные флаги в качестве второго аргумента функции json_encode() . С их помощью можно изменять принципы кодирования содержания переменных в строку JSON.

    Создаем переменную из строки JSON

    Для преобразования строки JSON в переменную PHP используется метод json_decode() . Заменим наш пример для JavaScript с методом JSON.parse() на код PHP:

    Как и для JavaScript данный код выдаст:

    [email protected] Чудо товар

    По умолчанию функция json_decode() возвращает объекты JSON как объекты PHP. Существуют обобщенные объекты PHP класса stdClass . Поэтому мы используем -> для доступа к свойствам объекта в примере выше.

    Если вам нужен объект JSON в виде ассоциированного массива PHP, нужно передать true в качестве второго аргумента функции json_decode() . Например:

    $cart = json_decode($jsonString, true); echo $cart["shopperEmail"] . "
    "; echo $cart["contents"]["productName"] . "
    ";

    Данный код выдаст такой же вывод:

    [email protected] Чудо товар

    Также функции json_decode() можно передавать другие аргументы для указания глубины рекурсии и способов обработки больших целых чисел.

    Заключение

    Хотя JSON прост для понимания и использования, он является очень полезным и гибким инструментом для передачи данных между приложениями и компьютерами, особенно при использовании AJAX. Если вы планируете разрабатывать AJAX приложение, то нет сомнений, что JSON станет важнейшим инструментом в вашей мастерской.

    У меня есть страница регистрации, чтобы позволить пользователям зарегистрироваться. перед регистрацией мне нужно подтвердить свой номер телефона. Я дал адрес веб-сервиса вместе с его параметрами.
    параметры, которые я дал:

    Http://********* Method:POST Headers:Content-Type:application/json Body: the following in: { "mobileNo":"0*********", "service":"****", "Code1":"*****", "content":"hi", "actionDate":"2017/09/26", "requestId":"1"}

    и вот код, который я нашел в Интернете:

    $data = array("mobileNo" => "****", "service" => "***", "Code1" => "*****", "content" => "55", "actionDate" => "2017/09/26"); $options = array("http" => array("method" => "POST", "content" => json_encode($data), "header"=> "Content-Type: application/json" . "Accept: application/json")); $url = "******"; $context = stream_context_create($options); $result = file_get_contents($url, false, $context); $response = json_decode($result);

    и вот ошибка, с которой я сталкиваюсь, когда я проверяю local:

    File_get_contents(http://********/sms-gateway/sms-external-zone /receive): failed to open stream: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond.

    и нет ошибки и нет результата (получить SMS) в ответ, когда я тестирую онлайн (cpanel сервер)

    По заданным параметрам, где я не прав?

    заранее спасибо.

    Решение

    Судя по вашей ошибке, ваш сервис не отвечает. Вы пытались открыть его в браузере, чтобы проверить, есть ли там ответ?

    Возможно, служба, которую вы пытаетесь вызвать, требует от вас предоставления статического IP-адреса с вашего веб-сервера, поскольку они предоставляют доступ только на уровне IP. Значит, ваш IP заблокирован, пока они не позволят.

    Я предлагаю вам использовать cURL для выполнения вашего запроса. Таким образом, вы получаете будущие данные для отладки, если что-то не получится. Еще здесь, если служба не отвечает, вы хотите получить любую другую информацию.

    $data = array("mobileNo" => "****", "service" => "***", "Code1" => "*****", "content" => "55", "actionDate" => "2017/09/26"); $url = "******"; $ch = curl_init($url); // set data as json string curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data)); // define json as content type curl_setopt($ch, CURLOPT_HTTPHEADER, array("Content-Type:application/json")); // tell curl to fetch return data curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); // follow location if redirect happens like http to https curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1); // send request $result = curl_exec($ch); // gives you the result - most of the time you only want this var_dump($result); // for debugging purpose, gives you the whole connection info var_dump(curl_getinfo($ch)); // gives back any occurred errors var_dump(curl_error($ch)); curl_close($ch);

     


    Читайте:



    Расширение pages чем открыть windows

    Расширение pages чем открыть windows

    1 расширения(ы) и 0 псевдоним(ы) в нашей базе данных Ниже вы можете найти ответы на следующие вопросы: Что такое .pages файл? Какая программа...

    Обзор смартфона LG V30 Plus — корейцы смогли Lg v30 какой цвет выбрать

    Обзор смартфона LG V30 Plus — корейцы смогли Lg v30 какой цвет выбрать

    Технические характеристики Платформа: Android 7.1 с LG UX 6.0+ Сеть: GSM, WCDMA, FDD-LTE (B1, B3, B7, B8, B20 и B38) Дисплей: 6 дюймов,...

    Как Связать Ваши Данные из Разных Книг в Excel

    Как Связать Ваши Данные из Разных Книг в Excel

    По мере того как вы используете и создаете больше рабочих документов Excel, у вас может возникнуть необходимость связать их между собой. Может быть...

    Учимся пользоваться программой другвокруг Скачать мир вокруг социальная сеть

    Учимся пользоваться программой другвокруг Скачать мир вокруг социальная сеть

    Сервис ДругВокруг знаком, пожалуй, всем любителям интернет-знакомств, за редким исключением. Он удобен из-за системы поиска людей вблизи...

    feed-image RSS