Extjs学习总结之11前端与后台的数据交互ajax

终于谈到核心了，不管界面多漂亮，那只是样子，我们要做的最终还是和后台数据库打交道，我们如果让前端获取后台的数据呢？当然是使用ajax技术，extjs对ajax做了很好的封装，已经不需要我们手动的再写那么啰嗦的代码了，那么我们看看extjs是如何使用ajax方式向服务器发送请求和如何输出数据的呢？





首先是ajax.js

Ext.onReady(function(){
	Ext.Ajax.request({
		url:"../../../getDateServlet",
		success:function(response,config){
			alert(config.url+","+config.method);
			Ext.MessageBox.alert("result",response.responseText);
		},
		failure:function(){
			Ext.MessageBox.alert("result","请求失败");
		},
		method:"post",
		params:{name:"吕鹏"}
	});
});

servlet:

package com.fenet.web.servlet;

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

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@SuppressWarnings("serial")
public class GetDateServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request,response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		try {
			request.setCharacterEncoding("utf-8");
			response.setCharacterEncoding("utf-8");
			PrintWriter out = response.getWriter();
			out.print("姓名:"+request.getParameter("name") +"  现在时间是:"+new Date().toString());
			out.flush();
			out.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

}

效果图：注意想看效果图的话要启动服务器了，因为这使用到servlet技术了，需要依赖服务器。我用的是tomcat服务器





接下来是upload.js 完成上传工作，看extjs是如何实现的：

Ext.onReady(function(){
 /*
  * ajax文件上传一般遵循下面三个步骤[开发时以下顺序是颠倒的]
  *  1、创建文件上传表单
  *  2、调用Ext.Ajax.request()方法实现文件上传
  *  3、定义文件上传处理器，并结合开源的文件上传组建如cos 将数据流转换成文件和参数
  */
 Ext.get("btn").on("click",function(){
  Ext.Ajax.request({
   url:"../../../fileUploadServlet",
   isUpload:true,
   form:"upform",
   success:function(upform,response){
    Ext.MessageBox.alert("result",response.responseText);
   }
  }); 
 });
});

servlet:

package com.fenet.web.servlet;

import java.io.IOException;
import java.io.PrintWriter;

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

import com.oreilly.servlet.MultipartRequest;

@SuppressWarnings("serial")
public class FileUploadServlet extends HttpServlet {

	public void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		try {
			request.setCharacterEncoding("utf-8");
			response.setCharacterEncoding("utf-8");
			MultipartRequest multi = new MultipartRequest(
					request,
					"D:\\",//文件上传以后保存的位置
					10*1024*1024,//允许上传文件的最大值
					"utf-8"//编码
			);
			PrintWriter out = response.getWriter();
			out.print("{success:true,msg:'上传成功'}"); 
			System.out.println("文件名："+multi.getFilesystemName("f"));
			System.out.println("文件描述："+multi.getParameter("desc"));
			out.flush();
			out.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

}

当前html页面你也要写点东西，不然没有file文件啊。如果使用extjs也可以实现，之后再说。



注：在这里上传功能是可以实现的，但是response的响应信息在我这里没有弹出来，我查阅了一些信息，我觉得应该是乱码的问题，乱码的解决我们之后会说。

另外，上传组件我用的是cos，你可以自学一下。