Ajax接收JSON数据
1. Ajax接收JSON数据
JSON:JavaScript对象表示法(JavaScript Object Notation)。JSON是一种存储和交换文本信息的语法。因为JSON比XML更轻量,效率更高,更易解析,所以在Ajax中前后台传输数据一般都使用的是JSON格式。
1.1.JSON与XML的对比
JSON
JSON 是纯文本
JSON 具有“自我描述性”(人类可读)
JSON 具有层级结构(值中存在值)
JSON 可通过 JavaScript eval()进行解析
JSON 数据可使用 AJAX 进行传输
XML
XML是文档结构,节点复杂
XML可以通过JavaScript解析,需要循环遍历DOM读取节点信息
XML厚重且读取效率低
1.2.JSON语法
JSON语法是JavaScript语法的子集。
JSON语法的规则:
- 数据在名称/值对中
- 数据由逗号分隔
- 花括号保存对象
- 方括号保存数组
JSON数据的书写格式时:名称/值对,即字段名称(在双引号中),后面一个冒号,对应是值,JSON的值可以是:数字(整数或浮点数)、字符串(在双引号中)、逻辑值(true或false)、数组(在方括号中)、对象(在花括号中)、null。
常见的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文件
- JSON 文件的文件类型是 ".json"
- JSON 文本的 MIME 类型是 "application/json"
1.4.JSON使用
JSON最常见的用法之一,是从web服务器上读取JSON格式的字符串数据,将JSON数据转化为JavaScript对象,然后在网页上使用该数据。
转化JSON格式字符串为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之间的操作实现。
后台:
虚拟了两个省、市Domain并提供加载获取省、市的方法供Servlet向前台传输数据:
City.java:
/** * 城市对象 * */ 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教程》
Atas ialah kandungan terperinci Ajax接收JSON数据. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Tajuk: Kaedah dan contoh kod untuk menyelesaikan ralat 403 dalam permintaan AJAX jQuery Ralat 403 merujuk kepada permintaan bahawa pelayan melarang akses kepada sumber Ralat ini biasanya berlaku kerana permintaan itu tidak mempunyai kebenaran atau ditolak oleh pelayan. Apabila membuat permintaan jQueryAJAX, anda kadangkala menghadapi situasi ini Artikel ini akan memperkenalkan cara menyelesaikan masalah ini dan memberikan contoh kod. Penyelesaian: Semak kebenaran: Mula-mula pastikan alamat URL yang diminta adalah betul dan sahkan bahawa anda mempunyai kebenaran yang mencukupi untuk mengakses sumber tersebut.

MySQL5.7 dan MySQL8.0 ialah dua versi pangkalan data MySQL yang berbeza Terdapat beberapa perbezaan utama antara mereka: Peningkatan prestasi: MySQL8.0 mempunyai beberapa peningkatan prestasi berbanding MySQL5.7. Ini termasuk pengoptimum pertanyaan yang lebih baik, penjanaan pelan pelaksanaan pertanyaan yang lebih cekap, algoritma pengindeksan yang lebih baik dan pertanyaan selari, dsb. Penambahbaikan ini boleh meningkatkan prestasi pertanyaan dan prestasi keseluruhan sistem. Sokongan JSON: MySQL 8.0 memperkenalkan sokongan asli untuk jenis data JSON, termasuk penyimpanan, pertanyaan dan pengindeksan data JSON. Ini menjadikan pemprosesan dan memanipulasi data JSON dalam MySQL lebih mudah dan cekap. Ciri transaksi: MySQL8.0 memperkenalkan beberapa ciri transaksi baharu, seperti atomic

jQuery ialah perpustakaan JavaScript popular yang digunakan untuk memudahkan pembangunan sisi klien. AJAX ialah teknologi yang menghantar permintaan tak segerak dan berinteraksi dengan pelayan tanpa memuatkan semula keseluruhan halaman web. Walau bagaimanapun, apabila menggunakan jQuery untuk membuat permintaan AJAX, anda kadangkala menghadapi 403 ralat. Ralat 403 biasanya ralat akses yang dinafikan pelayan, mungkin disebabkan oleh dasar keselamatan atau isu kebenaran. Dalam artikel ini, kami akan membincangkan cara menyelesaikan permintaan jQueryAJAX yang menghadapi ralat 403

Kaedah pengoptimuman prestasi untuk menukar tatasusunan PHP kepada JSON termasuk: menggunakan sambungan JSON dan fungsi json_encode() menambah pilihan JSON_UNESCAPED_UNICODE untuk mengelakkan aksara melarikan diri menggunakan penimbal untuk meningkatkan prestasi pengekodan JSON; Pustaka pengekodan JSON.

Anotasi dalam perpustakaan Jackson mengawal pensirilan dan penyahserilangan JSON: Pensirilan: @JsonIgnore: Abaikan harta @JsonProperty: Tentukan nama @JsonGetter: Gunakan kaedah get @JsonSetter: Gunakan kaedah yang ditetapkan Deserialization: @JsonIgnoreProperties: Abaikan harta @ JsonProperty: Nyatakan nama @JsonCreator: Gunakan pembina @JsonDeserialize: Logik tersuai

Menggunakan Ajax untuk mendapatkan pembolehubah daripada kaedah PHP adalah senario biasa dalam pembangunan web Melalui Ajax, halaman boleh diperoleh secara dinamik tanpa menyegarkan data. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Ajax untuk mendapatkan pembolehubah daripada kaedah PHP, dan memberikan contoh kod khusus. Pertama, kita perlu menulis fail PHP untuk mengendalikan permintaan Ajax dan mengembalikan pembolehubah yang diperlukan. Berikut ialah kod contoh untuk fail PHP mudah getData.php:

Bagaimana untuk menyelesaikan masalah jQueryAJAX ralat 403? Apabila membangunkan aplikasi web, jQuery sering digunakan untuk menghantar permintaan tak segerak. Walau bagaimanapun, kadangkala anda mungkin menghadapi kod ralat 403 apabila menggunakan jQueryAJAX, menunjukkan bahawa akses dilarang oleh pelayan. Ini biasanya disebabkan oleh tetapan keselamatan bahagian pelayan, tetapi terdapat cara untuk mengatasinya. Artikel ini akan memperkenalkan cara menyelesaikan masalah ralat jQueryAJAX 403 dan memberikan contoh kod khusus. 1. membuat

Pemahaman mendalam tentang PHP: Kaedah pelaksanaan menukar JSONUnicode kepada Bahasa Cina Semasa pembangunan, kami sering menghadapi situasi di mana kami perlu memproses data JSON dan pengekodan Unicode dalam JSON akan menyebabkan kami beberapa masalah dalam beberapa senario, terutamanya apabila kami perlu menukar Unicode Apabila pengekodan ditukar kepada aksara Cina. Dalam PHP, terdapat beberapa kaedah yang boleh membantu kami mencapai proses penukaran ini Kaedah biasa akan diperkenalkan di bawah dan contoh kod khusus akan disediakan. Mula-mula, mari kita fahami dulu Un dalam JSON
