REST模式demo

一、json
  1. jar包
要使程序可以運行必須引入JSON-lib包,JSON-lib包同時依賴於以下的JAR包:
  • json-lib-2.4-jdk15.jar
  • commons-beanutils-1.8.0.jar
  • commons-collections-3.2.1.jar
  • commons-lang-2.5.jar
  • ezmorph-1.0.6.jar
  1. JSON和其他對象轉換
  •  JAVA對象轉JSON
先將java對象轉換爲json對象,在將json對象轉換爲json字符串
JSONObject json = JSONObject.fromObject(obj);//將java對象轉換爲json對象
String str = json.toString();//將json對象轉換爲字符串
  • JSON轉JAVA
同樣先將json字符串轉換爲json對象,再將json對象轉換爲java對象,如下所示。
JSONObject obj = new JSONObject().fromObject(jsonStr);//將json字符串轉換爲json對象
將json對象轉換爲java對象
Person jb = (Person)JSONObject.toBean(obj,Person.class);//將建json對象轉換爲Person對象
  1. 遍歷JSON對象 獲取屬性
//res:返回的json對象 
var list="";
$.each(res,function(i){
                   list +=i+'    '+res[i]+'    ' ;
               })
結果:

 age 11 id 1 name zhangzhang sex 女

  1. 獲取JSON對象的指定屬性
//data1爲某個標籤的id值   rest爲JSON對象  name爲JSON對象的一個屬性名
document.getElementById("data1").innerHTML=res.name  //獲取json對象的指定屬性值,顯示在id=data1的標籤中

二、AJAX

  1. 在js中引入JQuery的核心庫(寫在<head></head>中)
<script src="jquery.min.js"></script>
需要引用  jquery.min.js

  1. AJAX請求
$.ajax({
           url:"/RestDemo1.1/demo1",   //ajax發送請求的地址
           //dataType:"json",     //預期服務器返回的數據類型
           data:{"name":"zhanzhanzhan"},  //data屬性,將data數據傳送到url地址中,發送到服務器的數據,將自動轉換爲請求字符串格式
           success:function (res){//請求成功後的回調函數

                alert(res);   //res返回的數據
                               
           },
           fail:function(res){//請求失敗後的回調函數
                alert(res);
           }
     })
三、代碼使用DEMO

  1. demoServlet.java 
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           // TODO Auto-generated method stub
           //設置編碼方式
                     response.setContentType("text/html;charset=UTF-8");
            PrintWriter out=response.getWriter();

           //聲明三個類,模擬數據庫中的查詢結果
                Student s1=new Student("zhang",1,"女",11);
                Student s2=new Student("wang",2,"女",22);
                Student s3=new Student("liu",3,"女",33);


                //設置編碼方式
                response.setContentType("text/html;charset=UTF-8");
                // 設置響應頭允許ajax跨域訪問
                //response.setHeader("Access-Control-Allow-Origin", "*");
                /* 星號表示所有的異域請求都可以接受, */
               //response.setHeader("Access-Control-Allow-Methods", "GET,POST");

                //獲取ajax 中data傳過來的數據
               String name = request.getParameter("name");
               s1.setName(name);


              JSONObject json = JSONObject.fromObject(s1);//將java對象轉換爲json對象
             String str = json.toString();//將json對象轉換爲字符串
             //out.println中的內容都將顯示在回調函數中
            out.print(json);
               
              
             out.flush();
             out.close();
     }

  1. demo1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>傳送json數據</title>
<script src="jquery.min.js"></script>  
<script>
//頁面加載時執行
$.ajax({
     url:"/RestDemo1.1/demo1",
     dataType:"json",
     data:{"name":"zhangzhang"},  //data屬性,將data數據傳送到url地址中
     success:function (res){
           document.getElementById("data2").innerHTML=res.name  //獲取json對象的指定屬性值
                     //DOM層刷新
                     var listHtml='';
                 //循環取json對象的屬性,並呈現在列表中
                listHtml += '<ul>';
                  $.each(res,function(i){
                   listHtml += '<li>'+i+'    '+res[i]+'</li>';
               })
                      listHtml += '</ul>';
               $("#data1").replaceWith(listHtml);   //將listHtml內容替換原有內容
                     //var arr;
                     //arr=res.split(" ");  //分割成數組,  “ ” 中的內容爲分隔符
                     console.log(res);


     },
     fail:function(res){
           alert(res);
     }
})
</script>
</head>
<body>

<input type="button" value="使用Json請求去後臺獲取數據返回是json對象"   onclick="toJson()" >

<div id="data1">111111</div>
<div id="data2">222222</div>

 <script>
 //這是啓動AJAX異步通信的方法
 function  toJson()
{
      alert(1);  //用於調試

     $.ajax({
           url:"/RestDemo1.1/demo1",   //ajax發送請求的地址
           //dataType:"json",     //json對象無法劃分數組,下面會出錯
           data:{"name":"zhanzhanzhan"},  //data屬性,將data數據傳送到url地址中
           success:function (res){
                alert(res);
                //DOM層刷新
                $("#data2").text(res);
                var arr;
                arr=res.split(" ");  //分割成數組  “” 中的內容爲分隔符
                console.log(arr);
           },
           fail:function(res){
                alert(res);
           }
     })
}


</script>

</body>
</html>

  1. web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>RestDemo1.1</display-name>
  <welcome-file-list>
    <welcome-file>demo1.html</welcome-file>

  </welcome-file-list>

  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>demoServlet</servlet-name>
    <servlet-class>demo.demoServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>demoServlet</servlet-name>
    <url-pattern>/demo1</url-pattern>
  </servlet-mapping>



</web-app>

四、異常處理

  1. java ClassNotFoundException   解決方案:導包  包不全 
  2. java NoClassDefFoundException   解決方案:將包放入tomcat的lib中 讓tomcat可以找到

五、資源
  1. json對象和其他對象轉化 http://www.sojson.com/blog/20.html
  2. JSONObject和JSONArray  http://blog.csdn.net/huangwuyi/article/details/5412500
  3. 上述異常區別  http://blog.csdn.net/chenchaofuck1/article/details/50971994
  4. AJAX使用方法  http://www.w3school.com.cn/jquery/ajax_ajax.asp
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章