extjs 中的ajax功能 示例...
时间：2010-08-06 来源：liuxiIT
示例一:
Ext.Ajax.request.json.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css"/> <mce:script type="text/javascript" src="../ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="../ext/ext-all.js" mce_src="ext/ext-all.js"></mce:script> <mce:script type="text/javascript"><!-- function login(){ alert('login'); var requestConfig={ url:'loginServerJson.jsp', jsonData:getJson(), callback:function(options,success,response){ var msg=["请求是否成功: ",success,"\n", "服务器返回值: ",response.responseText]; alert(msg.join('')); } }; Ext.Ajax.request(requestConfig); } //生成json对象 function getJson(){ var name=document.forms['loginForm'].userName.value; var pwd=document.forms['loginForm'].password.value; var jsonObj={ userName:name, password:pwd }; return jsonObj; alert("jsonObj:"+jsonObj); } // --></mce:script> </head> <body> <form id="loginForm"> 用户名:<input name="userName" type="text"> 密码: <input name="password" type="password"> <input type="button" value="登录" onclick="login()"> </form> </body> </html>
服务器端代码:loginServerJson.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.io.BufferedReader" %> <%@ page import="net.sf.json.*" %> <% BufferedReader in=request.getReader(); StringBuffer jsonStr=new StringBuffer(); String str=""; while((str=in.readLine())!=null){ jsonStr.append(str); } System.out.println("jsonStr:"+jsonStr); JSONObject jsonObj=JSONObject.fromObject(jsonStr.toString()); String userName=jsonObj.getString("userName"); String password=jsonObj.getString("password"); String msg=""; if(userName.equals("zhaoyun")&&password.equals("1234")){ msg="恭喜您"+userName+"登录成功!"; }else if(!userName.equals("zhaoyun")){ msg="用户名不存在"; }else{ msg="密码错误"; } response.setCharacterEncoding("UTF-8"); response.getWriter().write(msg); %>
示例二:
submitForm.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css"/> <mce:script type="text/javascript" src="../ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="../ext/ext-all.js" mce_src="ext/ext-all.js"></mce:script> <mce:script type="text/javascript"><!-- function login(){ var requestConfig={ url:'loginServer.jsp', form:'loginForm', callback:function(options,success,response){ var msg=["请求是否成功: ",success,"\n", "服务器返回值:",response.responseText]; alert(msg.join('')); } }; Ext.Ajax.request(requestConfig); } // --></mce:script> </head> <body> <form id="loginForm"> 用户名:<input name="userName" type="text"> 密码:<input name="password" type="password"> <input type="button" value="登录" onclick="login()"> </body> </html>
loginServer.jsp:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="UTF-8"%> <% String userName=request.getParameter("userName"); String password=request.getParameter("password"); String msg=""; if(userName.equals("zhaoyun")&&password.equals("1234")){ msg="恭喜您"+userName+"登录成功!"; }else if(!userName.equals("zhaoyun")){ msg="用户名不存在"; }else{ msg="密码错误"; } response.setCharacterEncoding("UTF-8"); response.getWriter().write(msg); %>
相关阅读 更多 +
