第十九讲：ExtJS与服务器交互

今天药忘吃喽~ 2022-04-05 11:22 293阅读 0赞

一、向服务器发送请求。

1.通过Ext.Ajax.request向服务器发送请求。

2.通过url属性来指定发送请求的地址。

3.通过params属性来设置请求参数。（参数的格式是核心）

4.callback属性来指定回调函数。

示例一：发送请求。//这个格式就非常的简单了，但是实际中这样用的并不多







Ext.Ajax.request({

url:“loginServer.jsp”,

params:{

username:“lifengxing”,

password:“123”

},

callback:function(options,success,response){

if(success){

alert(response.responseText)

}

}

})

请求页面loginServet.jsp。







<%@ page language=“java” contentType=“text/html; charset=utf-8” pageEncoding=“utf-8”%>

<%

String username = request.getParameter(“username”);

String password = request.getParameter(“password”);

String msg = “”;

if(username.equals(“lifengxing”) && password.equals(“123”)){

msg = “登陆成功”;

}else{

msg = “登陆失败”;

}

response.getWriter().write(msg);

%>

示例二：异步提交表单。（参数相当于是一个表单了）







<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

<html xmlns=“http://www.w3.org/1999/xhtml“>

  <head>

    <title>Request</title>

  <script type=“text/javascript” src=“../Ext/adapter/ext/ext-base.js”></script>

     <script type=“text/javascript” src=“../Ext/ext-all-debug.js”></script>

     <link rel=“stylesheet” type=“text/css” href=“../Ext/resources/css/ext-all.css”></link>

     <script type=“text/javascript” src=“TestRequest2.js”></script>

  </head>

  

  <body>

   <form id=“loginForm”>

   用户名:<input type=“text” name=“username”/><br />

   密码:<input type=“password” name=“password”/><br />

   <input type=“button” value=“登陆” onclick=“login()” />

   </form>

  </body>

</html>

 






function login() {

Ext.Ajax.request({

url:“loginServer.jsp”,

form:“loginForm”,

callback:function(options,success,response){

if(success){

alert(response.responseText)

}

}

})

}

 

二、向服务器发送XML数据。







function login() {

Ext.Ajax.request({

url:“loginServerXML.jsp”,

xmlData:createXML(),

callback:function(options,success,response){

if(success){

alert(response.responseText)

}

}

})

}

 

function createXML(){

//获得表单值

var uname = document.forms[“loginForm”].username.value;

var pw = document.forms[“loginForm”].password.value;

//创建XML文档对象

var dom = new ActiveXObject(“msxml2.DOMDocument”);

//头部声明

var header = dom.createProcessingInstruction(“xml”, “version=’1.0’”);

dom.appendChild(header);

var root = dom.createElement(“userinfo”);

var username = dom.createElement(“username”);

username.text = uname;

var password = dom.createElement(“password”);

password.text = pw;

root.appendChild(username);

root.appendChild(password);

dom.appendChild(root);

return dom;

}

 

服务器解析XML数据。







<%@ page language=“java” contentType=“text/html; charset=utf-8” pageEncoding=“utf-8”%>

<%@ page import=“org.dom4j.“%>

<%@ page import=“org.dom4j.io.“%>

<%

SAXReader sax = new SAXReader();

Document document = sax.read(request.getInputStream());

Element root = document.getRootElement();

String username = root.element(“username”).getStringValue();

String password = root.element(“password”).getStringValue();

String msg = “”;

if(username.equals(“lifengxing”) && password.equals(“123”)){

msg = “登陆成功”;

}else{

msg = “登陆失败”;

}

response.getWriter().write(msg);

%>

注意：需要导入dom4j这个JAR包

三、向服务器发送Json数据。







function login() {

Ext.Ajax.request({

url:“loginServerJson.jsp”,

jsonData:createJson(),

callback:function(options,success,response){

if(success){

alert(response.responseText)

}

}

})

}

 

function createJson() {

var uname = document.forms[“loginForm”].username.value;

var pw = document.forms[“loginForm”].password.value;

var jsonObject = {

username : uname,

password : pw

}

return jsonObject;

}

服务器解析Json数据。







<%@ page language=“java” contentType=“text/html; charset=utf-8” pageEncoding=“utf-8”%>

<%@ page import=“net.sf.json.*”%>

<%@page import=“java.io.BufferedReader;”%>

<%

BufferedReader in = request.getReader();

StringBuffer jsonStr = new StringBuffer();

String str = “”;

while((str = in.readLine()) != null) {

jsonStr.append(str);

}

 

JSONObject jsonObject = JSONObject.fromObject(jsonStr.toString());

 

String username = jsonObject.getString(“username”);

String password = jsonObject.getString(“password”);

String msg = “”;

if(username.equals(“lifengxing”) && password.equals(“123”)){

msg = “登陆成功”;

}else{

msg = “登陆失败”;

}

response.getWriter().write(msg);

%>

注意：需要导入如下几个JAR包。

commons-beanutils.jar

commons-lang.jar

ezmorph-1.0.6.jar

json-lib-1.1-jdk15.jar

commons-logging-1.1.jar

commons-collections-3.1.jar

发表评论

表情：
评论列表 （有 0 条评论，293人围观）

还没有评论，来说两句吧...

相关阅读