suchen

Heim >Web-Frontend >js-Tutorial >So übermitteln Sie Daten im JSON-Format an den Server

So übermitteln Sie Daten im JSON-Format an den Server

php中世界最好的语言
php中世界最好的语言Original
2018-04-08 15:32:351906Durchsuche

Dieses Mal bringe ich Ihnen die Vorsichtsmaßnahmen für die Übermittlung von Daten im JSON-Format an den Server. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Hero.java vorbereiten

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>

Die Funktion der JSON.stringify-Funktion besteht darin, ein Javascript-Objekt in einen String im JSON-Format zu konvertieren .

SubmitServlet zum Empfangen von Daten vorbereiten

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. Holen Sie sich die vom Browser übermittelte Zeichenfolge

2. Konvertieren Sie die Zeichenfolge in ein JSON-Objekt

3. Konvertieren Sie das JSON-Objekt in ein Hero-Objekt.

Konfigurieren Sie schließlich 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>

Starten Sie Tomcat, um auf das Projekt http://127.0.0.1:8080/ zuzugreifen name/submit.html

Sehen Sie sich die in der Tomcat-Konsole übergebenen Daten an

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Was ist der Unterschied zwischen wx:for und wx:for-item im WeChat-Miniprogramm

Implementierung JS Datums- und Zeitauswahl

Wie ruft die übergeordnete Angular-Komponente die untergeordnete Komponente auf?

Das obige ist der detaillierte Inhalt vonSo übermitteln Sie Daten im JSON-Format an den Server. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript tomcat json html angular for xml 字符串 JS 对象 选择器 微信小程序 http
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Umgang mit wiederholter Bindung, wenn JS dynamisch geladen wirdNächster Artikel：Umgang mit wiederholter Bindung, wenn JS dynamisch geladen wird

In Verbindung stehende Artikel

Mehr sehen