Jquery AJAX 簡單實現前台後台互傳資料

標籤：ack   提交   .com   好的   div   ==   ons   asc   ring   

AJAX是一個很強大的東西，之前寫過一篇 AJAX Servlet非同步互動 ，是放在請求的url上進行實現的，放在Url上長度有限，如果想儲存很長的東西，例如部落格這樣的就不行了！

 

導包：

主要是json.jar這個包，其他的是ueditor的包！

 

前台代碼：（這是部分主要的代碼，省略了ueditor的代碼）

//引入easyui的一些外掛程式<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css"><script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script><script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script><script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>//提交內容的方法function submitContents(){            //UE.getEditor(‘editor‘).getContent()這個方法是ueditor給出的獲得輸入框內容的方法，自己實現一些即可            var contents = UE.getEditor(‘editor‘).getContent();            
　　　　　　　//這是jquery封裝好的ajax方法
　　　　　　　//save.do是後台地址！ {text:contents}前一個是鍵，後一個是值，從後台用getparam...方法獲得值！function(result)是後台給前台放回東西的處理函數,
　　　　　　  //result是後台返回的json對象
            $.post("save.do",{text:contents},function(result){

                if(result.success){                    $.messager.alert(‘系統提示‘,‘操作成功了！這是從後台返回的內容：‘+result.contents);                }else{                    $.messager.alert(‘系統提示‘,‘操作沒有成功！‘);                }            },"json");}//按鈕Binder 方法<input type="button" value="提交" onclick="submitContents()">

 

後台代碼：

package com.loger.servlet;import java.io.IOException;import java.net.URLDecoder;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.json.JSONObject;public class Save extends HttpServlet {        @SuppressWarnings("deprecation")    @Override    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        // TODO Auto-generated method stub        
　　　　 //返回的編碼過濾，不然前台接收到的中文會亂碼        resp.setCharacterEncoding("utf-8");                String contents = req.getParameter("text");
　　　　 //定義一個json對象，這是通過索引值對的方式存值的        JSONObject result = new JSONObject();        if(contents == null){            result.put("false",false );            System.out.println("沒有內容");                    }else{            result.put("success", true);            result.put("contents", contents);            System.out.println(contents);        }        resp.getWriter().println(result.toString());    }        @Override    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {        // TODO Auto-generated method stub        this.doPost(req, resp);    }}

 

運行結果：

 

Jquery AJAX 簡單實現前台後台互傳資料