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，你可以自学一下。