首頁 web前端 js教程 使用JSON提交資料到服務端步奏詳解

使用JSON提交資料到服務端步奏詳解

Apr 20, 2018 pm 02:37 PM
javascript json 服務

這次帶給大家使用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>
登入後複製

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);
 } 
}
登入後複製

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>
登入後複製

啟動tomcat存取http://127.0.0.1:8080/專案名稱/submit .html

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

我相信看了這篇文章案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

Angular父元件呼叫子元件步驟詳解

vue axios請求逾時處理詳解(附程式碼)

以上是使用JSON提交資料到服務端步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

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

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1317
25
PHP教程
1268
29
C# 教程
1247
24
PHP 數組轉 JSON 的效能最佳化技巧 PHP 數組轉 JSON 的效能最佳化技巧 May 04, 2024 pm 06:15 PM

PHP數組轉JSON的效能最佳化方法包括:使用JSON擴充和json_encode()函數;新增JSON_UNESCAPED_UNICODE選項以避免字元轉義;使用緩衝區提高循環編碼效能;快取JSON編碼結果;考慮使用第三方JSON編碼庫。

MySQL5.7和MySQL8.0的差別是什麼? MySQL5.7和MySQL8.0的差別是什麼? Feb 19, 2024 am 11:21 AM

MySQL5.7和MySQL8.0是兩個不同的MySQL資料庫版本,它們之間有以下一些主要差異:效能改進:MySQL8.0相對於MySQL5.7有一些效能改進。其中包括更好的查詢優化器、更有效率的查詢執行計劃產生、更好的索引演算法和平行查詢等。這些改進可以提高查詢效能和整體系統效能。 JSON支援:MySQL8.0引入了對JSON資料類型的原生支持,包括JSON資料的儲存、查詢和索引。這使得在MySQL中處理和操作JSON資料變得更加方便和有效率。事務特性:MySQL8.0引進了一些新的事務特性,如原子

Linux 重啟服務的正確方式是什麼? Linux 重啟服務的正確方式是什麼? Mar 15, 2024 am 09:09 AM

Linux重啟服務的正確方式是什麼?在使用Linux系統時,經常會遇到需要重新啟動某個服務的情況,但是有時我們可能會在重新啟動服務時遇到一些問題,例如服務沒有真正停止或啟動等情況。因此,掌握正確的重啟服務的方式是非常重要的。在Linux中,通常可以使用systemctl指令來管理系統服務。 systemctl指令是systemd系統管理員的一部分

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

Jackson庫中的註解可控制JSON序列化和反序列化:序列化:@JsonIgnore:忽略屬性@JsonProperty:指定名稱@JsonGetter:使用獲取方法@JsonSetter:使用設定方法反序列化:@JsonIgnoreProperties:忽略屬性@ JsonProperty:指定名稱@JsonCreator:使用建構子@JsonDeserialize:自訂邏輯

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

深入了解PHP:JSONUnicode轉中文的實作方法在開發中,我們經常會遇到需要處理JSON資料的情況,而JSON中的Unicode編碼在一些場景下會為我們帶來一些問題,特別是當需要將Unicode編碼轉換為中文字元時。在PHP中,有一些方法可以幫助我們實現這個轉換過程,以下將介紹常用的方法,並提供具體的程式碼範例。首先,讓我們先來了解一下JSON中Un

Ubuntu PHP服務無法正常啟動的解決辦法 Ubuntu PHP服務無法正常啟動的解決辦法 Feb 28, 2024 am 10:48 AM

標題:解決Ubuntu下PHP服務無法正常啟動的方法及具體程式碼範例在使用Ubuntu建立網站或應用程式時,經常會遇到PHP服務無法正常啟動的問題,這會導致網站無法正常存取或應用程式無法正常運行。本文將介紹如何解決Ubuntu下PHP服務無法正常啟動的問題,同時提供具體的程式碼範例幫助讀者快速解決此類故障。一、檢查PHP設定檔首先,我們需要檢查PHP的設定文件

如何在 Linux 中執行服務重啟指令? 如何在 Linux 中執行服務重啟指令? Mar 14, 2024 am 11:06 AM

在Linux中,要執行服務重新啟動指令通常需要使用Systemd服務管理員。 Systemd是Linux上廣泛使用的服務管理工具,可輕鬆管理和控制系統服務。以下將介紹如何在Linux中透過Systemd執行服務重啟指令,並提供具體的程式碼範例。步驟一:確認服務名稱在執行服務重新啟動指令之前,首先需要確認要重新啟動的服務名稱。可以透過以下命令查看系統中正在執行的服務清單:

如何使用 PHP 函數處理 JSON 資料? 如何使用 PHP 函數處理 JSON 資料? May 04, 2024 pm 03:21 PM

PHP提供了以下函數來處理JSON資料:解析JSON資料:使用json_decode()將JSON字串轉換為PHP數組。建立JSON資料:使用json_encode()將PHP陣列或物件轉換為JSON字串。取得JSON資料的特定值:使用PHP數組函數存取特定值,例如鍵值對或陣列元素。

See all articles