使用JSON格式提交數(shù)據(jù)到服務(wù)端的實例代碼
準(zhǔn)備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方式提交數(shù)據(jù)</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>
<div id="messageDiv"></div>
<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控制臺查看服務(wù)端接收到的數(shù)據(jù)");
});
});
</script>
</body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用AJAX以JSON方式提交數(shù)據(jù)</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>
<div id="messageDiv"></div>
<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控制臺查看服務(wù)端接收到的數(shù)據(jù)");
});
});
</script>
</body>
</body>
</html>
JSON.stringify函數(shù)的作用是將一個javascript對象,轉(zhuǎn)換為JSON格式的字符串。
準(zhǔn)備SubmitServlet用來接收數(shù)據(jù)
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("服務(wù)端接收到的數(shù)據(jù)是:" +data);
JSONObject json=JSONObject.fromObject(data);
System.out.println("轉(zhuǎn)換為JSON對象之后是:"+ json);
Hero hero = (Hero)JSONObject.toBean(json,Hero.class);
System.out.println("轉(zhuǎn)換為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("服務(wù)端接收到的數(shù)據(jù)是:" +data);
JSONObject json=JSONObject.fromObject(data);
System.out.println("轉(zhuǎn)換為JSON對象之后是:"+ json);
Hero hero = (Hero)JSONObject.toBean(json,Hero.class);
System.out.println("轉(zhuǎn)換為Hero對象之后是:"+hero);
}
}
1. 獲取瀏覽器提交的字符串
2. 把字符串轉(zhuǎn)換為JSON對象
3. 把JSON對象轉(zhuǎn)換為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>
</web-app>啟動tomcat訪問http://127.0.0.1:8080/項目名/submit.html

在tomcat控制臺看到傳來的數(shù)據(jù)

總結(jié)
以上所述是小編給大家介紹的使用JSON格式提交數(shù)據(jù)到服務(wù)端的實例代碼,希望對大家有所幫助,如果大家有任何疑問花園給我留言,小編會及時回復(fù)大家的!
相關(guān)文章
javascript json對象小技巧之鍵名作為變量用法分析
這篇文章主要介紹了javascript json對象小技巧之鍵名作為變量用法,結(jié)合實例形式分析了json對象變量操作相關(guān)使用技巧,需要的朋友可以參考下2019-11-11
javascript使用輸出語句實現(xiàn)網(wǎng)頁特效代碼
這篇文章主要介紹javascript使用輸出語句實現(xiàn)網(wǎng)頁特效,有需要的朋友可以參考下2015-08-08
innerHTML,outerHTML,innerText,outerText的用法及區(qū)別解析
本篇主要是對innerHTML,outerHTML,innerText,outerText的用法及區(qū)別進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12
javascript數(shù)組中的concat方法和splice方法
這篇文章主要介紹了javascript數(shù)組中的concat方法和splice方法,concat方法作用合并數(shù)組,可以合并一個或多個數(shù)組,會返回合并數(shù)組之后的數(shù)據(jù),不會改變原來的數(shù)組,更多相關(guān)內(nèi)容需要的小伙伴可以參考下面文章內(nèi)容2022-03-03
js 完美圖片新聞輪轉(zhuǎn)效果,騰訊大粵網(wǎng)首頁圖片輪轉(zhuǎn)改造而來
找過很多圖片輪詢效果,和我的要求總是有些出入,不能十全十美。不是功能不全,就是太多花哨。本想自己開發(fā)一個,鑒于瑣事拖延,遲遲未能開始2011-11-11

