ホームページ > 記事 > ウェブフロントエンド > Ajax は JSON データを受信します
JSON: JavaScript Object Notation。 JSON は、テキスト情報を保存および交換するための構文です。 JSON は XML よりも軽く、効率的で、解析が簡単なため、Ajax のフロントエンドとバックエンドでデータを送信するために一般に JSON 形式が使用されます。
1.1. JSON と XML の比較
JSON
JSON はプレーン テキストです
JSON には「self-説明 (人間が読める形式)
#JSON は階層構造になっています (値の中に値が存在します) #JSON は JavaScript eval() を通じて解析できます#JSON データを処理できますAJAX 送信を使用します。
XML
XML は複雑なノードを含むドキュメント構造です。
XML は JavaScript を通じて解析でき、ノード情報を読み取るには DOM をループする必要があります。
XML は分厚く、読み取り効率が低い
1.2.JSON 構文
JSON 構文は JavaScript 構文のサブセットです。
# JSON 構文のルール:
#名前と値のペアのデータ
一般的な JSON 構文の記述:
<script type="text/javascript"> var json01 = {}; //json的第一种写法:json对象 var json02 = []; //json的第二种写法:json数组 // json对象一般写法 var json03 = { name:"张小三", age:45, sex:true }; // json对象标准格式 var json03_1 = { "name":"张小三", "age":45, "sex":true }; //json数组 var json04 = [{ name:"张小三", age:45, sex:true },{ name:"李华", age:20, sex:false } ]; var json05 = [{ name:"张小三", age:45, sex:true, department:{ id:1, name:"IT部", employees:[ {name:"xxx", age:23}, {name:"yyy", age:24} ] } },{ name:"李华", age:20, sex:false } ]; </script>
1.3.JSON ファイル
①JavaScript 関数 eval()を使用する
<script type="text/javascript"> //最标准的json格式:key必须要加双引号 var formatJson = { "name" : "黄小邪", "age" : 23, "sex" : true }; //①jsonStr转json对象方式一: //eval:计算javascript字符串,并把它作为脚本代码来执行 //前台接收到的是json字符串格式,拿数据需要把字符串转化成json对象 var jsonStr = '{name : "黄小邪", age : 23, "sex" : true}'; //注意:使用eval转换jsonStr,必须前后加括号,这里不区分是否标准格式 var jsonObj = eval("("+ jsonStr +")"); console.debug(jsonObj); </script>
②JSON パーサーを使用する
## eval() 関数は、任意の JavaScript コードをコンパイルして実行できますが、eval() を使用すると、潜在的なセキュリティ問題が隠蔽されます。 JSON パーサーを使用して JSON 文字列を JavaScript オブジェクトに変換する方が安全です。 JSON パーサーは、JSON 文字列テキストのみを認識し、スクリプトをコンパイルしませんが、解析が比較的速く、すぐに使用できるという利便性を備えています。 JSON パーサーを使用する: ①JSON 変換 JSONObj 関連の jar パッケージをインポートする必要があります;#②変換オブジェクトには任意の JSON 文字を使用できます文字列形式のテキストですが、標準の JSON 形式である必要があります:
//②jsonStr转json对象方式二: var jsonStr2 = '{"name" : "黄小邪", "age" : 23, "sex" : true}'; //注意:使用JSON.parse转换jsonStr必须保证jsonStr是标准格式的字符串 var jsonObj2 = JSON.parse(jsonStr2); console.debug(jsonObj2);
1.5. JSON と Ajax の間の二次リンケージの例
ここでは、JSON 文字列操作とフロントエンドは JSON 形式でデータを送信し、JSON と Ajax 間の操作の実装を示します。/** * 城市对象 * */ public class City { private Long id; private String name; public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public City() { } public City(Long id, String name) { super(); this.id = id; this.name = name; } /** * 根据省份id查询省份中的城市! * * @return */ public static List<City> getCityByProvinceId(Long id) { List<City> citys = new ArrayList<City>(); if (id == 1) { citys = Arrays.asList( new City(1L,"成都"), new City(2L,"南充"), new City(3L,"绵阳"), new City(4L,"遂林"), new City(5L,"达州"), new City(6L,"德阳"), new City(7L,"乐山") ); } else if (id == 2) { citys = Arrays.asList( new City(11L,"广州"), new City(12L,"佛山"), new City(13L,"东莞") ); } else if (id == 3) { citys = Arrays.asList( new City(21L,"昆明"), new City(22L,"玉溪"), new City(23L,"丽江") ); } return citys; } }Province.java:
public class Province { private Long id; private String name; public Province(Long id, String name) { super(); this.id = id; this.name = name; } public Long getId() { return id; } public void setId(Long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; } public Province() { super(); } public static List<Province> getAllProvince() { List<Province> provinces = new ArrayList<Province>(); provinces.add(new Province(1L, "四川")); provinces.add(new Province(2L, "广东")); provinces.add(new Province(3L, "云南")); return provinces; } }CityProvinceServlet を指定して Ajax にリクエスト アドレスを提供します:
@WebServlet("/loadData") public class CityProvinceServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String cmd = req.getParameter("cmd"); String id = req.getParameter("id"); req.setCharacterEncoding("UTF-8"); resp.setContentType("text/json;charset=UTF-8"); //加载省 if(cmd.equals("province")){ List<Province> provinceList = Province.getAllProvince(); resp.getWriter().print(JSONSerializer.toJSON(provinceList)); System.out.println("加载省!"); } //加载市 else { if(id != null && id != ""){ List<City> cityList = City.getCityByProvinceId(Long.parseLong(id)); resp.getWriter().print(JSONSerializer.toJSON(cityList)); System.out.println("加载市!"); } } } }フロント デスクは Ajax と JSON を使用して、渡された JSON 形式のデータを解析します。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title> <script type="text/javascript"> function getAjax(){ var ajax = null; if(XMLHttpRequest){ ajax = new XMLHttpRequest(); }else if(ActiveXObject){ ajax = new ActiveXObject("Microsoft XMLHTTP"); } return ajax; } function loadProvince() { var xhr = getAjax(); xhr.open("GET", "/loadData?cmd=province"); xhr.onreadystatechange = function () { if(xhr.readyState == 4 && xhr.status == 200){ //provinces:[{"id":1,"name":"四川"},{"id":2,"name":"广东"},{"id":3,"name":"云南"}] var provinces = xhr.responseText; var jsonObjArr = JSON.parse(provinces); //操作DOM往省级option进行填充数据 //首先先创建每个option元素 //将jsonObj数据填充进option中 jsonObjArr.forEach( function (obj) { var option = document.createElement("option"); option.setAttribute("value", obj.id); option.innerHTML = obj.name; document.getElementById("province").appendChild(option); } ); } }; xhr.send(); } loadProvince(); function loadCity() { //得到id var id = document.getElementById("province").value; //如果是请选择,对应就不加载 if(id == -1){ document.getElementById("city").innerHTML = "<option>----请选择----</option>"; return; } //每次加载都初始化一次 document.getElementById("city").innerHTML = ""; var xhr = getAjax(); xhr.open("GET", "/loadData?cmd=city&id=" + id); xhr.onreadystatechange = function () { if(xhr.readyState == 4 && xhr.status == 200){ //[{"id":1,"name":"成都"},{"id":2,"name":"南充"},{"id":3,"name":"绵阳"},{"id":4,"name":"遂林"},{"id":5,"name":"达州"}, // {"id":6,"name":"德阳"},{"id":7,"name":"乐山"}] var cityes = xhr.responseText; var jsonObjArr = JSON.parse(cityes); jsonObjArr.forEach( function (obj) { var option = document.createElement("option"); option.setAttribute("value", obj.id); option.innerHTML = obj.name; document.getElementById("city").appendChild(option); } ); //去除掉----请选择------ document.getElementById("city").options.remove(0); } }; xhr.send(); } </script> </head> <body> 省级:<select id="province" onchange="loadCity()"> <option value="-1">----请选择----</option> </select> 市级:<select id="city"> <option>----请选择----</option> </select> </body> </html>効果は次のとおりです:
推奨チュートリアル: "
JS チュートリアル"
以上がAjax は JSON データを受信しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。