Rumah hujung hadapan web tutorial js 使用JSON传输数据到服务端

使用JSON传输数据到服务端

Jun 12, 2018 am 10:24 AM
json

这次给大家带来使用JSON传输数据到服务端,的注意事项有哪些,下面就是实战案例,一起来看一下。

准备Hero.java

public class Hero { 
 private String name; 
 private int hp; 
 public String getName() { 
  return name; 
 }  public void setName(String name) { 
  this.name = name; 
 } 
 public int getHp() { 
  return hp; 
 } 
 public void setHp(int hp) { 
  this.hp = hp; 
 } 
 @Override 
  public String toString() { 
   return "Hero [name=" + name + ", hp=" + hp + "]"; 
  } 
} 
public class Hero {
 private String name;
 private int hp;
 public String getName() {
 return name;
 }
 public void setName(String name) {
 this.name = name;
 }
 public int getHp() {
 return hp;
 }
 public void setHp(int hp) {
 this.hp = hp;
 }
 @Override
 public String toString() {
   return "Hero [name=" + name + ", hp=" + hp + "]";
  }
}submit.html文件
[html] view plain copy print?<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>用AJAX以JSON方式提交数据</title> 
<script type="text/javascript" src="jquery.min.js"></script> 
</head> 
<body> 
 <form > 
  名称:<input type="text" id="name"/><br/> 
  血量:<input type="text" id="hp"/><br/> 
  <input type="button" value="提交" id="sender">  
 </form> 
 <p id="messagep"></p> 
 <script> 
 $('#sender').click(function(){ 
  var name=document.getElementById('name').value; 
  var hp=document.getElementById('hp').value; 
  var hero={"name":name,"hp":hp}; 
  var url="submitServlet"; 
  $.post( 
    url, 
    {"data":JSON.stringify(hero)}, 
    function(data) { 
      alert("提交成功,请在Tomcat控制台查看服务端接收到的数据"); 
   });  
 }); 
 </script> 
</body> 
</body> 
</html> 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>用AJAX以JSON方式提交数据</title> 
<script type="text/javascript" src="jquery.min.js"></script> 
</head> 
<body> 
 <form > 
  名称:<input type="text" id="name"/><br/> 
  血量:<input type="text" id="hp"/><br/> 
  <input type="button" value="提交" id="sender"> 
 </form> 
 <p id="messagep"></p> 
 <script> 
 $('#sender').click(function(){ 
  var name=document.getElementById('name').value; 
  var hp=document.getElementById('hp').value; 
  var hero={"name":name,"hp":hp}; 
  var url="submitServlet"; 
  $.post(
   url, 
   {"data":JSON.stringify(hero)},
   function(data) { 
    alert("提交成功,请在Tomcat控制台查看服务端接收到的数据");
   }); 
 }); 
 </script> 
</body> 
</body>
</html>
Salin selepas log masuk

JSON.stringify函数的作用是将一个javascript对象,转换为JSON格式的字符串。

准备SubmitServlet用来接收数据

import java.io.IOException; 
import javax.servlet.ServletException; 
import javax.servlet.http.HttpServlet; 
import javax.servlet.http.HttpServletRequest; 
import javax.servlet.http.HttpServletResponse; 
import net.sf.json.JSONObject; 
public class SubmitServlet extends HttpServlet { 
 protected void service(HttpServletRequest request, HttpServletResponse response) 
   throws ServletException, IOException { 
  String data =request.getParameter("data"); 
  System.out.println("服务端接收到的数据是:" +data); 
  JSONObject json=JSONObject.fromObject(data); 
  System.out.println("转换为JSON对象之后是:"+ json); 
  Hero hero = (Hero)JSONObject.toBean(json,Hero.class); 
  System.out.println("转换为Hero对象之后是:"+hero); 
 } 
} 
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject; 
public class SubmitServlet extends HttpServlet { 
 protected void service(HttpServletRequest request, HttpServletResponse response) 
   throws ServletException, IOException {
  String data =request.getParameter("data");
  System.out.println("服务端接收到的数据是:" +data);
  JSONObject json=JSONObject.fromObject(data); 
  System.out.println("转换为JSON对象之后是:"+ json);
  Hero hero = (Hero)JSONObject.toBean(json,Hero.class); 
  System.out.println("转换为Hero对象之后是:"+hero);
 } 
}
Salin selepas log masuk

1. 获取浏览器提交的字符串

2. 把字符串转换为JSON对象

3. 把JSON对象转换为Hero对象

最后配置web.xml

<?xml version="1.0" encoding="UTF-8"?> 
<web-app> 
  <servlet> 
  <servlet-name>SubmitServlet</servlet-name> 
  <servlet-class>SubmitServlet</servlet-class> 
 </servlet> 
 <servlet-mapping> 
  <servlet-name>SubmitServlet</servlet-name> 
  <url-pattern>/submitServlet</url-pattern> 
 </servlet-mapping> 
</web-app> 
<?xml version="1.0" encoding="UTF-8"?>
<web-app>
 <servlet>
  <servlet-name>SubmitServlet</servlet-name>
  <servlet-class>SubmitServlet</servlet-class>
 </servlet>
 <servlet-mapping>
  <servlet-name>SubmitServlet</servlet-name>
  <url-pattern>/submitServlet</url-pattern>
 </servlet-mapping>
Salin selepas log masuk

启动tomcat访问http://127.0.0.1:8080/项目名/submit.html

在tomcat控制台看到传来的数据

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

vue axios调用接口时请求超时

很重要的9个使用技巧(附代码)

Atas ialah kandungan terperinci 使用JSON传输数据到服务端. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk mengecualikan medan daripada JSON menggunakan anotasi @Expose dalam Java? Bagaimana untuk mengecualikan medan daripada JSON menggunakan anotasi @Expose dalam Java? Sep 16, 2023 pm 09:49 PM

Anotasi Gson@Expose boleh digunakan untuk menandakan sama ada medan terdedah (terkandung atau tidak) untuk bersiri atau penyahsirilan. Anotasi @Expose boleh mengambil dua parameter, setiap parameter ialah nilai boolean dan boleh mengambil nilai benar atau salah. Untuk GSON bertindak balas terhadap anotasi @Expose, kita perlu mencipta tika Gson menggunakan kelas GsonBuilder dan perlu memanggil kaedah excludeFieldsWithoutExposeAnnotation(), yang mengkonfigurasi Gson untuk mengecualikan semua medan tanpa anotasi Expose daripada bersiri atau penyahserialisasian. Sintaks publicGsonBuildereexclud

Gabungan golang WebSocket dan JSON: merealisasikan penghantaran dan penghuraian data Gabungan golang WebSocket dan JSON: merealisasikan penghantaran dan penghuraian data Dec 17, 2023 pm 03:06 PM

Gabungan golangWebSocket dan JSON: merealisasikan penghantaran dan penghuraian data Dalam pembangunan Web moden, penghantaran data masa nyata menjadi semakin penting. WebSocket ialah protokol yang digunakan untuk mencapai komunikasi dua hala Tidak seperti model respons permintaan HTTP tradisional, WebSocket membenarkan pelayan untuk menolak data secara aktif kepada klien. JSON (JavaScriptObjectNotation) ialah format ringan untuk pertukaran data yang ringkas dan mudah dibaca.

Apakah perbezaan antara MySQL5.7 dan MySQL8.0? Apakah perbezaan antara MySQL5.7 dan MySQL8.0? Feb 19, 2024 am 11:21 AM

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

Petua pengoptimuman prestasi untuk menukar tatasusunan PHP kepada JSON Petua pengoptimuman prestasi untuk menukar tatasusunan PHP kepada JSON May 04, 2024 pm 06:15 PM

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.

Cara mengendalikan format data XML dan JSON dalam pembangunan C# Cara mengendalikan format data XML dan JSON dalam pembangunan C# Oct 09, 2023 pm 06:15 PM

Cara mengendalikan format data XML dan JSON dalam pembangunan C# memerlukan contoh kod khusus Dalam pembangunan perisian moden, XML dan JSON ialah dua format data yang digunakan secara meluas. XML (Extensible Markup Language) ialah bahasa penanda yang digunakan untuk menyimpan dan menghantar data, manakala JSON (JavaScript Object Notation) ialah format pertukaran data yang ringan. Dalam pembangunan C#, kami selalunya perlu memproses dan mengendalikan data XML dan JSON Artikel ini akan memfokuskan pada cara menggunakan C# untuk memproses kedua-dua format data ini dan melampirkan

Gunakan fungsi json.MarshalIndent dalam golang untuk menukar struktur kepada rentetan JSON yang diformatkan Gunakan fungsi json.MarshalIndent dalam golang untuk menukar struktur kepada rentetan JSON yang diformatkan Nov 18, 2023 pm 01:59 PM

Gunakan fungsi json.MarshalIndent dalam golang untuk menukar struktur menjadi rentetan JSON yang diformatkan Apabila menulis program dalam Golang, kita selalunya perlu menukar struktur menjadi rentetan JSON Dalam proses ini, fungsi json.MarshalIndent boleh membantu kita output berformat. Di bawah ini kami akan menerangkan secara terperinci cara menggunakan fungsi ini dan memberikan contoh kod khusus. Mula-mula, mari buat struktur yang mengandungi beberapa data. Berikut adalah petunjuk

Tutorial penggunaan Panda: Permulaan pantas untuk membaca fail JSON Tutorial penggunaan Panda: Permulaan pantas untuk membaca fail JSON Jan 13, 2024 am 10:15 AM

Permulaan Pantas: Kaedah Pandas membaca fail JSON, contoh kod khusus diperlukan Pengenalan: Dalam bidang analisis data dan sains data, Pandas ialah salah satu perpustakaan Python yang penting. Ia menyediakan fungsi yang kaya dan struktur data yang fleksibel, serta boleh memproses dan menganalisis pelbagai data dengan mudah. Dalam aplikasi praktikal, kita sering menghadapi situasi di mana kita perlu membaca fail JSON. Artikel ini akan memperkenalkan cara menggunakan Panda untuk membaca fail JSON dan melampirkan contoh kod tertentu. 1. Pemasangan Panda

Bagaimanakah anotasi dalam perpustakaan Jackson mengawal pensirilan dan penyahsirilan JSON? Bagaimanakah anotasi dalam perpustakaan Jackson mengawal pensirilan dan penyahsirilan JSON? May 06, 2024 pm 10:09 PM

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

See all articles