How to submit data in JSON format to the server-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to submit data in JSON format to the server

Apr 08, 2018 pm 03:32 PM

javascript json

This time I bring to you, what are the precautions when submitting JSON format data to the server. The following is a practical case, let's take a look.

Prepare 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?&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
&lt;head&gt; 
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt; 
&lt;title&gt;用AJAX以JSON方式提交数据&lt;/title&gt; 
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.min.js&quot;&gt;&lt;/script&gt; 
&lt;/head&gt; 
&lt;body&gt; 
 &lt;form &gt; 
  名称：&lt;input type=&quot;text&quot; id=&quot;name&quot;/&gt;&lt;br/&gt; 
  血量：&lt;input type=&quot;text&quot; id=&quot;hp&quot;/&gt;&lt;br/&gt; 
  &lt;input type=&quot;button&quot; value=&quot;提交&quot; id=&quot;sender&quot;&gt;  
 &lt;/form&gt; 
 &lt;p id=&quot;messagep&quot;&gt;&lt;/p&gt; 
 &lt;script&gt; 
 $('#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控制台查看服务端接收到的数据"); 
   });  
 }); 
 &lt;/script&gt; 
&lt;/body&gt; 
&lt;/body&gt; 
&lt;/html&gt; 
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt; 
&lt;title&gt;用AJAX以JSON方式提交数据&lt;/title&gt; 
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.min.js&quot;&gt;&lt;/script&gt; 
&lt;/head&gt; 
&lt;body&gt; 
 &lt;form &gt; 
  名称：&lt;input type=&quot;text&quot; id=&quot;name&quot;/&gt;&lt;br/&gt; 
  血量：&lt;input type=&quot;text&quot; id=&quot;hp&quot;/&gt;&lt;br/&gt; 
  &lt;input type=&quot;button&quot; value=&quot;提交&quot; id=&quot;sender&quot;&gt; 
 &lt;/form&gt; 
 &lt;p id=&quot;messagep&quot;&gt;&lt;/p&gt; 
 &lt;script&gt; 
 $('#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控制台查看服务端接收到的数据");
   }); 
 }); 
 &lt;/script&gt; 
&lt;/body&gt; 
&lt;/body&gt;
&lt;/html&gt;

Copy after login

The function of JSON.stringify function is to convert a javascript object into a string in JSON format.

Prepare SubmitServlet to receive data

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

Copy after login

1. Get the string submitted by the browser

2. Convert the string into a JSON object

3 . Convert JSON object to Hero object

Finally configure web.xml

&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt; 
&lt;web-app&gt; 
  &lt;servlet&gt; 
  &lt;servlet-name&gt;SubmitServlet&lt;/servlet-name&gt; 
  &lt;servlet-class&gt;SubmitServlet&lt;/servlet-class&gt; 
 &lt;/servlet&gt; 
 &lt;servlet-mapping&gt; 
  &lt;servlet-name&gt;SubmitServlet&lt;/servlet-name&gt; 
  &lt;url-pattern&gt;/submitServlet&lt;/url-pattern&gt; 
 &lt;/servlet-mapping&gt; 
&lt;/web-app&gt; 
&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;web-app&gt;
 &lt;servlet&gt;
  &lt;servlet-name&gt;SubmitServlet&lt;/servlet-name&gt;
  &lt;servlet-class&gt;SubmitServlet&lt;/servlet-class&gt;
 &lt;/servlet&gt;
 &lt;servlet-mapping&gt;
  &lt;servlet-name&gt;SubmitServlet&lt;/servlet-name&gt;
  &lt;url-pattern&gt;/submitServlet&lt;/url-pattern&gt;
 &lt;/servlet-mapping&gt;

Copy after login

</web-app>Start tomcat to access http://127.0.0.1:8080/project name/submit .html

#See the data coming from the tomcat console

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!