社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 web前端 js教程 JSON格式的資料如何提交至服務端

JSON格式的資料如何提交至服務端

Apr 08, 2018 pm 03:32 PM
javascript json

這次給大家帶來，JSON格式資料提交到服務端的注意事項有哪些，下面就是實戰案例，一起來看一下。

準備Hero.java

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

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>

登入後複製

JSON.stringify函數的作用是將一個javascript物件，轉換為JSON格式的字串。

準備SubmitServlet用來接收資料

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

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);

 } 

}

登入後複製

1. 取得瀏覽器提交的字串

2. 把字串轉換成JSON物件

#3 . 把JSON物件轉換為Hero物件

最後設定web.xml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<?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>

登入後複製

</web-app>啟動tomcat存取http://127.0.0.1:8080/專案名稱/submit .html

在tomcat控制台看到傳來的資料

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

微信小程式裡wx:for和wx:for-item有什麼差別

##實現JS日期時間選擇器

Angular父元件怎麼呼叫子元件

以上是JSON格式的資料如何提交至服務端的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱門文章

兩個點博物館：邦格荒地地點指南
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前 By DDD
倉庫：如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？
3 週前 By 王林
顯示更多

熱門工具標籤

代碼&IT
音訊
商業
行銷
AI檢測器
聊天機器人
設計與藝術

熱門文章

兩個點博物館：邦格荒地地點指南
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前 By DDD
倉庫：如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？
3 週前 By 王林
顯示更多

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7121
9
Java教學
1534
14
Laravel 教程
1256
25
PHP教程
1205
29
CakePHP 教程
1153
46
顯示更多
Related knowledge
MySQL5.7和MySQL8.0的差別是什麼？ MySQL5.7和MySQL8.0的差別是什麼？ Feb 19, 2024 am 11:21 AM

MySQL5.7和MySQL8.0的差別是什麼？

PHP 數組轉 JSON 的效能最佳化技巧 PHP 數組轉 JSON 的效能最佳化技巧 May 04, 2024 pm 06:15 PM

PHP 數組轉 JSON 的效能最佳化技巧

Jackson庫中註解如何控制JSON序列化和反序列化？ Jackson庫中註解如何控制JSON序列化和反序列化？ May 06, 2024 pm 10:09 PM

Jackson庫中註解如何控制JSON序列化和反序列化？

Pandas使用教學：讀取JSON檔案的快速入門 Pandas使用教學：讀取JSON檔案的快速入門 Jan 13, 2024 am 10:15 AM

Pandas使用教學：讀取JSON檔案的快速入門

簡易JavaScript教學：取得HTTP狀態碼的方法 簡易JavaScript教學：取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

簡易JavaScript教學：取得HTTP狀態碼的方法

深入了解PHP：JSON Unicode轉中文的實作方法 深入了解PHP：JSON Unicode轉中文的實作方法 Mar 05, 2024 pm 02:48 PM

深入了解PHP：JSON Unicode轉中文的實作方法

如何在JavaScript中取得HTTP狀態碼的簡單方法 如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

如何在JavaScript中取得HTTP狀態碼的簡單方法

PHP 數組轉 JSON 的快捷技巧 PHP 數組轉 JSON 的快捷技巧 May 03, 2024 pm 06:33 PM

PHP 數組轉 JSON 的快捷技巧

See all articles