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中，已经讲完。当然，这是表面的，但深层的原理还要继续学习。以后有新的发现再来更。

　　　转载请注明出处！