Un resumen de varias formas de obtener datos json del servidor según el método $.ajax()

1. ¿Qué es json?

Json es una estructura de datos que reemplaza a xml. En comparación con xml, es más pequeño pero tiene fuertes capacidades descriptivas, utiliza menos tráfico y es más rápido para transmitir datos a través de la red.

Json es una cadena de caracteres, marcados con los siguientes símbolos.

{Par clave-valor}: objeto json

} para simplificar la matriz json anterior, que es un objeto con una matriz de edad.

2. El valor del atributo dataType en el método $.ajax()

Se requiere que el atributo dataType en el método $.ajax() sea un parámetro de tipo String, que es el tipo de datos que se espera devolver por el servidor. Si no se especifica, JQuery devolverá automáticamente respuestaXML o respuestaTexto según la información mime del paquete http explicada en la Parte 3 y pasada como parámetro de función de devolución de llamada. Los tipos disponibles son los siguientes:

xml: Devuelve un documento XML que puede ser procesado con JQuery.

html: Devuelve información HTML en texto plano; la etiqueta de script incluida se ejecutará cuando se inserte en el DOM.

script: Devuelve código JavaScript en texto plano. Los resultados no se almacenan en caché automáticamente. A menos que se establezcan parámetros de caché. Tenga en cuenta que al realizar solicitudes remotas (no bajo el mismo dominio), todas las solicitudes de publicación se convertirán en solicitudes de obtención.

json: Devuelve datos JSON.

jsonp: formato JSONP. Al llamar a una función usando el formulario SONP, como myurl?callback=?, JQuery reemplazará automáticamente el último "?" con el nombre de función correcto para ejecutar la función de devolución de llamada.

3. Tipo de datos Mime y método setContentType() de respuesta

¿Qué es un tipo MIME? Al transmitir el resultado de salida al navegador, el navegador debe iniciar la aplicación adecuada para procesar el documento de salida. Esto se puede lograr a través de varios tipos de MIME (Extensiones multipropósito de correo de Internet). En HTTP, los tipos MIME se definen en el encabezado Content-Type.

Por ejemplo, supongamos que desea enviar un archivo de Microsoft Excel al cliente. Entonces el tipo MIME en este momento es "application/vnd.ms-excel". En la mayoría de los casos prácticos, este archivo se pasará a Execl para su procesamiento (suponiendo que configuremos Execl para manejar la aplicación de tipo MIME específica). En Java, la forma de establecer el tipo MIME es mediante la propiedad ContentType del objeto Response. Por ejemplo, se usa comúnmente: respuesta.setContentType("text/html;charset=UTF-8") para configurar.

En el protocolo HTTP más antiguo, no había información adicional sobre el tipo de datos. Todos los datos transmitidos eran interpretados por el programa cliente como documentos HTML en lenguaje de marcado de hipertexto. Para admitir tipos de datos multimedia, el protocolo HTTP utilizaba MIME. información del tipo de datos adjunta al documento para identificar el tipo de datos.

Cada tipo MIME consta de dos partes. La primera parte es la categoría general de datos, como texto, imagen, etc., y la segunda parte define el tipo específico.

Tipos MIME comunes:

Lenguaje de marcado de hipertexto text.html,.html texto/html

Texto sin formato.txt texto/plain

RTF texto.rtf aplicación/rtf

GIF gráficos.gif imagen/gif

JPEG gráficos.ipeg,.jpg imagen/jpeg

au archivo de sonido. au audio/basic

Archivo de música MIDI mid, .midi audio/midi, audio/x-midi

Archivo de música RealAudio .ra, .ram audio/x-pn-realaudio

Archivo MPEG.mpg,.mpeg vídeo/mpeg

Archivo AVI.avi vídeo/x-msvideo

Aplicación archivo GZIP.gz/x-gzip

Archivo TAR.aplicación tar/x-tar

Cuando el programa cliente recibe datos del servidor, solo acepta el flujo de datos del servidor y no conoce el nombre del documento. por lo que el servidor debe utilizar información adicional para indicarle al programa cliente el tipo MIME de los datos.

Antes de enviar los datos reales, el servidor primero debe enviar la información de tipo MIME que marca los datos. Esta información se define utilizando la palabra clave de tipo de contenido. Por ejemplo, para un documento HTML, el servidor primero. envíe las siguientes dos líneas de información de identificación MIME, esta identificación no es parte del archivo de datos real.

Tipo de contenido: texto/html

Tenga en cuenta que la segunda línea es una línea en blanco, lo cual es necesario. El propósito de usar esta línea en blanco es combinar la información MIME con la. contenido de datos reales separados.

Como se mencionó anteriormente, en Java, la forma de configurar el tipo MIME es a través de la propiedad ContentType del objeto Response. El método de configuración es utilizar la declaración Response.setContentType(MIME), Response.setContentType(. MIME) Su función es permitir que el navegador del cliente distinga diferentes tipos de datos y llame a diferentes módulos integrados de programas en el navegador de acuerdo con diferentes MIME para procesar los datos correspondientes.

Una gran cantidad de tipos MIME están definidos en el directorio de instalación de Tomcat \conf\web.xml, al que puede consultar. Por ejemplo, puede configurar:

response.setContentType("text/html; charset=utf-8");

response.setContentType("text/plain; charset=) utf-8" "); text

aplicación/json datos json

Este método establece el tipo de contenido de la respuesta enviada al cliente. La respuesta aún no se ha enviado. El tipo de contenido proporcionado puede incluir especificaciones de codificación de caracteres, por ejemplo: text/html;charset=UTF-8. Si se llama a este método antes de llamar al método getWriter(), entonces la codificación de caracteres de la respuesta solo se establecerá a partir del tipo de contenido dado. Si se llama a este método después de llamar al método getWriter() o después de enviarlo, no establecerá la codificación de caracteres de la respuesta. En el caso de utilizar el protocolo http, este método establece el encabezado de entidad de tipo Contenido.

Cuatro. Tres formas de obtener datos json usando el método $.ajax()

La configuración del parámetro dataType determina cómo jquery nos ayuda a analizar automáticamente los datos devueltos por el servidor. Hay varias formas de obtener la cadena json. devuelto por el fondo y analizarlo en un objeto json. El siguiente es Java como ejemplo. Los resultados de los siguientes tres métodos se muestran en la Figura 1. El proyecto se está ejecutando en la intranet y solo puede tomar capturas de pantalla. fotos lo siento.

1. Si el tipo de datos no está establecido en el parámetro $.ajax() y el tipo de retorno no está establecido en la respuesta en segundo plano, el archivo Response.setContentType("text/html;charset=utf-) 8" se procesará como texto normal de forma predeterminada. ); también se usa como procesamiento de texto. En js, debe usar manualmente eval() o $.parseJSON() y otros métodos para convertir la cadena devuelta en un objeto json.

//Código Java: obtiene los datos de la tabla histórica de un único posicionador CNC en segundo plano

public void getHistorySingleData() throws IOException{

HttpServletRequest request = ServletActionContext. getRequest();

HttpServletResponse respuesta = ServletActionContext.getResponse();

respuesta.setHeader("Tipo de contenido", "text/html;charset=UTF- 8");

respuesta.setContentType("text/html;charset=utf-8");

String nombre del dispositivo = request.getParameter("nombre del dispositivo");

String startDate = request.getParameter("startDate");

String endDate = request.getParameter("endDate");

SingleHistoryData[] singleHistoryData = chartService.getHistorySingleData (nombre del dispositivo, fecha de inicio, fecha de finalización);

System.out.println(singleHistoryData.length);

System.out.println(JSONArray.fromObject(singleHistoryData).toString()) ;//print :[{"time":"2016-11-11 10:00:00","state":"corriendo","ball":"lock",....},{"time" :"2016 -11-11 10:00:05","state":"Run","ball":"Lock",....},{},{}....] Varios objetos singleHistoryData fueron encontrado Simplemente imprima la información de varios objetos {"time":"2016-11-11 10:00:05","state":"Run","ball":"Lock",....}

Response.getWriter().print(JSONArray.fromObject(singleHistoryData).toString());

}

/*código js: Seleccione para consultar un tiempo determinado period Los datos se mostrarán después de hacer clic en la consulta*/

$("#search").click(function () {

var data1 = [];

var n;

var nombreDeDispositivo=$("cuerpo").attr("id");

var FechaInicio = $("#FechaInicio").val(

var endDate = $("#endDate").val();

$.ajax({

url:"/avvii/chart); /getHistorySingleData ",

tipo:"publicación",

datos:{

"deviceName":devic

eName,

"startDate": startDate,

"endDate": endDate

},

éxito: función (datos) {

alert(data);//---->Emergente [{"time":"2016-11-11 10:00:00","state":"Ejecutar","ball " :"Bloquear",....},{"time":"2016-11-11 10:00:05","state":"Ejecutar","ball":"Bloquear",... . },{},{}....], se pasan varios objetos singleHistoryData en segundo plano y se imprime la información de varios objetos {"time":"2016-11-11 10:00:05","state" : "Ejecutar","ball":"lock",....}

alert(Object.prototype.toString.call(data) //--->Emergente [object String] ] , indicando que los datos obtenidos son datos de tipo String

var JsonObjs = eval("(" + data + ")"); //O: var JsonObjs = $.parseJSON(data);

alert(JsonObjs);//alert(JsonObjs);---->Emergente [objeto Objeto],[objeto Objeto],[objeto Objeto][objeto Objeto],[objeto Objeto],[objeto Object]? Después de que varios objetos singleHistoryData se pasan al fondo, se imprimen varios [object Object].

n=JsonObjs.length;

if(n==0){

alert("No hay datos en el período de tiempo que seleccionó, consulte nuevamente");

}

for(var i = 0; i < JsonObjs.length; i++){

var name = JsonObjs[i]['time'];// Para cada dato: JsonObjs[i], o: JsonObjs[i].time

var estado = JsonObjs[ i]['estado'];

var ball = JsonObjs[i]['ball'];

var xd = JsonObjs[ i]['xd'];

var yd = JsonObjs[i]['yd'];

var zd = JsonObjs[i]['zd'];

var xf = JsonObjs[ i]['xf'];

var yf = JsonObjs[i]['yf'];

var zf = JsonObjs[i]['zf'];

data1[i] = {nombre:nombre,estado:estado,bola:bola,xd:xd,yd:yd,zd:zd,xf :xf,yf:yf,zf:zf};// Simplemente haga coincidir el número con el encabezado a continuación. En cuanto al nombre, no afecta el uso del control

}

for(var j=0;j<(10-((JsonOb

js.length)%10));j++){ //Completa las líneas en blanco en la última página para mantener la longitud de la tabla sin cambios

data1[j+JsonObjs.length] = {name:" ",estado:"",bola:"",xd:"",yd:"",zd:"",xf:"",yf:"",zf:""};

}

}

var userOptions = {

"id":"kingTable", //id de tabla requerida

"head" :["Tiempo", "Estado de funcionamiento", "Estado de la cabeza esférica", "Posición en dirección X/mm", "Posición en dirección Y/mm", "Posición en dirección Z/mm", "Carga en dirección X- capacidad de carga/Kg", "capacidad de carga en dirección Y/Kg", "capacidad de carga en dirección Z/Kg"], //Se requiere el encabezado del cabezal

"body":data1, //Visualización de datos devuelto por tbody el fondo es requerido

"foot":true, // true/false si se debe mostrar tfoot --- default false

"displayNum": 10, //debe ser predeterminado a 10 para mostrar el número de líneas por página

"groupDataNum":6, //número predeterminado opcional de 10 grupos

sort:false, //haga clic en el encabezado para ordenar verdadero /false ---default false

search:false, //El valor predeterminado es false y no hay búsqueda

lang:{

gopageButtonSearchText:"Buscar "

}

}

var cs = new KingTable(null,userOptions);

}

});

});

2. Establezca dataType="json" en el parámetro $.ajax(), luego jquery convertirá automáticamente la cadena devuelta en un objeto json.

El fondo se puede configurar en: recomendado Response.setContentType("text/html;charset=utf-8");

// Código Java: obtiene los datos de la tabla histórica de un único posicionador CNC en segundo plano

public void getHistorySingleData() throws IOException{

HttpServletRequest request = ServletActionContext.getRequest() ;

HttpServletResponse respuesta = ServletActionContext.getResponse();

respuesta.setHeader("Contenido-tipo", "text/html;charset=UTF-8");

respuesta. setContentType("text/html;charset=utf-8");

String nombre del dispositivo = request.getParameter("nombre del dispositivo");

String startDate= request.getParameter("startDate ");

String endDate = request.getParameter("endDate");

SingleHistoryData[] singleHistoryData = chartService.getHistorySingleData(deviceName,startDate, endDate) ;

System.out.println(singleHistoryData.length);

System.out.println(JSONArray.fromObject(singleHistoryData).toString());//Imprimir: [{ "time":"2016 -11-11 10:00:00","state":"Ejecutar","ball":"Bloquear",....},{"time":"2016-11-11 10:00:05 ","state":"Run","ball":"Lock",....},{},{}....] Imprime la información de varios objetos después de encontrar varios objetos singleHistoryData {" time":"2016-11-11 10:00:05","state":"Ejecutar","ball":"Bloquear",....}

respuesta.getWriter( ) .print(JSONArray.fromObject(singleHistoryData).toString());

}

/*código js: cuando la página se carga por primera vez, muestra los datos durante el tiempo especificado period*/

var data1 = [];

var deviceName=$("body").attr("id");

var startDate = $("#startDate ").val("2000-01-01 00:00:00");

var endDate = $("#endDate").val("2018-01-01 00:00:00 ");

$.ajax({