recherche

Maison  >  Article  >  interface Web  >  Comment implémenter JQuery pour transmettre et analyser des données au format Json sous le framework SpringMVC_jquery

Comment implémenter JQuery pour transmettre et analyser des données au format Json sous le framework SpringMVC_jquery

WBOY
WBOYoriginal
2016-05-16 15:26:281467parcourir

En tant que format d'échange de données léger, json occupe une position très importante dans l'échange de données front-end et back-end. La syntaxe de Json est très simple, utilisant une représentation par paire clé-valeur. JSON peut convertir un ensemble de données représenté dans un objet JavaScript en une chaîne, qui peut ensuite être facilement transmise entre des fonctions, ou d'un client Web vers un programme côté serveur dans une application asynchrone. Une chaîne au format json peut être transmise depuis. le programme côté serveur vers le front-end et interprété par le front-end. Cette chaîne est conforme à la syntaxe json, et la syntaxe json est un sous-ensemble de la syntaxe javascript, donc javascript peut facilement l'interpréter, et JSON peut représenter des structures plus complexes que les « paires nom/valeur ». Jetons un coup d'œil à la façon dont JQuery transfère/analyse les données au format json à travers un exemple.

1. Premier coup d'œil au code jsp front-end : 

<%@ page language="java" contentType="text/html; charset=UTF-8" 
  pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<script type="text/javascript" src="/springMVC6/js/jquery-1.7.2.js"></script> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<script type="text/javascript"> 
  $(document).ready(function(){ 
    //传递字符串格式json对象到后台（一个json对象） 
    $("#resolveJsonObject").click(function(){ 
      var userName =encodeURI($("#userName").attr("value")); 
      var age = encodeURI($("#age").attr("value")); 
      var user = {userName:userName,age:age}; 
      var aMenu = encodeURI(JSON.stringify(user)); 
      $.ajax({ 
         url:"/springMVC6/user/data/resolveJsonObject" , 
         data:"orderJson=" + aMenu,  
         success:function(data){ 
        } 
      }); 
    }); 
    //传递json数组到后台 
    $("#resolveJsonArray").click(function(){ 
      var userName =encodeURI($("#userName").attr("value")); 
      var age = encodeURI($("#age").attr("value")); 
      //数组开始 
      var user1 = {userName:userName,age:age}; 
      var allMenu={ 
        "menu":[ ] 
        }; 
      allMenu.menu.push(user1); 
      var allMenu1 = encodeURI(JSON.stringify(allMenu)); 
      $.ajax({ 
        //json数组 
         url:"/springMVC6/user/data/resolveJsonArray" , 
        data:"orderJson=" + allMenu1, 
        success:function(data){ 
        } 
      }); 
    }); 
    //接收后台的json在前台解析 
    $("#resolveJson").click(function(){ 
      $.ajax({ 
        //解析从后台返回的json数据 
        url:"/springMVC6/user/data/resolveJson" , 
        type:"post",     
        success:function(data){ 
          var arr=eval(data); 
          alert(arr.length); 
          for(var m = 0;m<arr.length;m++){ 
            alert(arr[m].user.userName); 
          } 
        } 
      }); 
    }); 
  }); 
</script> 
</head> 
<body> 
  <h1>json添加用户</h1> 
  姓名：<input id="userName" type="text" name="userName"> 
  年龄:<input id="age" type="text" name="age"><br> 
  <input type="button" id="resolveJsonObject" value="json对象"> 
  <input type="button" id="resolveJsonArray" value="json数组"> 
  <input type="button" id="resolveJson" value="前端解析json字符串"> 
</body> 
</html>

2. Utilisez Javabean pour analyser les données frontales : 

package com.tgb.web.controller.annotation; 
import java.io.IOException; 
import java.net.URLDecoder; 
import java.util.ArrayList; 
import java.util.List; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import net.sf.json.JSONArray; 
import net.sf.json.JSONObject; 
import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.RequestMapping; 
import com.tgb.web.controller.entity.User; 
@Controller 
@RequestMapping("/user/data") 
public class DataController { 
  //接收前台传过来的字符串格式的json对象，在后台进行解析 
  @RequestMapping("/resolveJsonObject"  ) 
  public void resolveJsonObject(HttpServletRequest request,HttpServletResponse response) throws IOException { 
    //解码 
    String str = URLDecoder.decode(request.getParameter("orderJson"),"UTF-8"); 
    JSONObject jb=new JSONObject(); 
    //将json格式的字符串转换为json对象，并取得该对象的“userName”属性值 
    String o=(String)jb.fromObject(str).get("userName"); 
    System.out.println(o); 
  } 
   //传递json数组字符串 
  @RequestMapping("/resolveJsonArray" ) 
  public void resolveJsonArray(HttpServletRequest request,HttpServletResponse response) throws IOException { 
    //解码，为了解决中文乱码 
    String str = URLDecoder.decode(request.getParameter("orderJson"),"UTF-8"); 
    JSONObject jb=new JSONObject(); 
    //将json格式的字符串转换为json数组对象 
    JSONArray array=(JSONArray)jb.fromObject(str).get("menu"); 
    //取得json数组中的第一个对象 
    JSONObject o = (JSONObject) array.get(0);//获得第一个array结果 
    //取出json数组中第一个对象的“userName”属性值 
    String name=o.get("userName").toString();//获得属性值 
    System.out.println(name); 
  } 
  //通过该函数返回json格式的数据，在前台通过JQuery进行解析 
  @RequestMapping("/resolveJson" ) 
  public void resolveJson(HttpServletRequest request,HttpServletResponse response) throws IOException { 
    List m = (List) new ArrayList(); 
    JSONArray jsons = new JSONArray(); 
    for(int i=0;i<10;i++){ 
      User user = new User(); 
      user.setUserName("name_" + i); 
      m.add(user); 
    } 
    for(int j=0;j<m.size();j++){ 
      JSONObject jsonObject = new JSONObject(); 
      jsonObject.put("user", m.get(j)); 
      jsons.add(jsonObject); 
    } 
    response.getWriter().print(jsons.toString()) ; 
  } 
  @RequestMapping("/toJson"  ) 
  public String toJson() { 
    return "/json"; 
  } 
}

Le rôle de json n'est pas seulement d'être transmis sous forme de chaîne au front et au backend. Lorsque nous utilisons json pour transférer des données, la chose la plus importante à considérer est son efficacité de transmission. Lorsque deux systèmes doivent échanger des données, si des objets sérialisés sont transmis, l'efficacité est très faible. Si un tableau stockant un grand nombre d'objets est transmis, l'efficacité est encore plus inimaginable à l'heure actuelle si vous convertissez des objets ou des données en json. Chaînes pour la transmission, et l'efficacité sera grandement améliorée. Cet article explique uniquement la transmission et l'analyse des données front-end et back-end dans un seul système. La transmission JSON entre des systèmes hétérogènes n'entre pas dans le cadre de cet article.

Ce qui précède contient des informations pertinentes sur la façon dont JQuery transmet et analyse les données au format Json sous le framework SpringMVC. J'espère que vous l'aimerez.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：AngularJs implémente le formulaire ng1.3 validation_AngularJSArticle suivant：AngularJs implémente le formulaire ng1.3 validation_AngularJS

Articles Liés

Voir plus