ajax傳遞前端用戶數據到servlet，ajax接受servlet傳遞回來的json數據

一.ajax將前台用戶提交的數據傳遞給servlet。

　　1.前端jsp(html)頁面。引入外部jq文件和js文件。

 

　　　　備注:這里說明一下，登錄按鈕有個login()方法，里面有個path參數，這個只是項目的根路徑，所以如果你知道你的根路徑，就不需要這個參數，因為

　　　　　　可以直接在js文件寫。

　　2.js文件。這個js文件是第一幅圖片的外部js文件。

 

　　　　備注:這里的login()方法就是登陸按鈕觸發的方法，里面的path就是根路徑。獲取前端用戶輸入的值，isNull()這個方法是對輸入框是否為空進行判斷，

              　　這里並不重要。可以不寫。我這里的dataType設置為text格式，因為我返回的數據只有一個布爾型數據，無需使用json。還有一個重點是返回來的

                     布爾型數據要去掉兩個空格字符。

　　 3.后台控制層servlet文件。

           

　　　　備注:如上圖代碼所示，獲取鍵為username的值的方法與獲取表單的name為username的值得方法一樣，但這里的username這個字符創不是從jsp或

　　　　　　html文件獲取的，而是通過js文件中的ajax獲取的。如果你js文件中的dataType的值為“json”，我不敢保證這樣的方式可以獲取。現在說完了ajax

                     傳值到servlet，以及servlet如何獲取。

二.servlet傳遞json數據到前台ajax中。

　　1.后台控制層servlet文件

　　

package com.practice.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSONArray;
import com.practice.bean.Message;
import com.practice.service.QueryService;

@SuppressWarnings("serial")
public class MessageListServlet extends HttpServlet{
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // TODO Auto-generated method stub
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // TODO Auto-generated method stub
        //1.調用業務邏輯層，取得數據
        QueryService queryService=new QueryService();
        JSONArray jsonData=queryService.messageList();
        
        //跟蹤數據
        System.out.println(jsonData.toString());
        //2.返回數據到js中ajax中
        resp.getWriter().write(jsonData.toString());

    }
}

 　　　　備注:我這里調用了業務邏輯層的QueryService里messageList()方法。messgeList()方法返回json數組。最后將json數組打印到頁面中。可以訪問servlet

　　　　　　地址看到該數據。

　　2.業務邏輯層service文件

package com.practice.service;

import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.practice.bean.Message;
import com.practice.dao.MessageDao;
import com.practice.dao.UserDao;

/**
 * 業務邏輯層(查詢業務)
 * @author Administrator
 *
 */
public class QueryService {
        public Boolean  Login(String username,String password,String userType){
            UserDao userDao=new UserDao();
            Boolean isExist=false;
            
                try {
                    isExist= userDao.query(username, password, userType);
                } catch (SQLException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
                return isExist;
        }
        
        public JSONArray messageList(){
            MessageDao messageDao=new MessageDao();
            List<Message> data=new ArrayList<Message>();
            //1.定義一個json數組
            JSONArray jsonData=new JSONArray();
            try {
                //這里獲取了所有的message對象並存放在data中
                data = messageDao.queryMessage();
            } catch (SQLException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
           for(int i=0;i<data.size();i++){
               //2.定義json對象
               JSONObject object=new JSONObject();
               Message ms=data.get(i);
               object.put("command", ms.getCommand());
               object.put("description", ms.getDescription());
               //3.將所有的json對象存放在json數組jsonData中
               jsonData.add(object);
            }
           //4.返回json數組
           return jsonData;
     }
}

　　　　備注:注釋很清楚了,這里需要到如json的jar包，要alibaba公司的。下載地址。

　　3.js文件

/**
 * 一打開就執行
 */
$(document).ready(function(){  
     loadData();
}); 
/**
 * 加載數據
 * @returns
 */
function loadData(){
    
    var path="/AutoReplyRobot";
     $.ajax({
        type: "post",
        dataType: "json",
        url: path+"/MessageList.action",
        success: function (data) {
        //    alert(data.length);
                appendMessageList(data);
        },
     });
}
function appendMessageList(data){
    
    var html="";
    for(var i=0;i<data.length;i++){
        var xuhao=i+1;
        html+="<tr>"+
        " <td><input type='checkbox'  name='checkbox1' value=''></td>"+
        "<td>"+xuhao+"</td>"+
        "<td>"+data[i].command+"</td>"+
        "<td>"+data[i].description+"</td>"+
        "<td>刪除/修改</td>"+
        "</tr>";
    }
    
    $("#main").append(html);
}
    

　　　　備注:在ajax中success中的function可以測試已經取得的json數據。我注釋掉的兩行可以將注釋去掉。在瀏覽器中測試一下。至此，servlet傳遞json數據到

　　　　　　ajax中，已經講完。當然，這是表面的，但深層的原理還要繼續學習。以后有新的發現再來更。

　　　轉載請注明出處！