`
tesia
  • 浏览: 33431 次
  • 性别: Icon_minigender_2
  • 来自: 广州
社区版块
存档分类
最新评论

Ext.Ajax.request提交JSON数据

阅读更多
JSON作为轻量级的数据传输格式,在很多时候可以作为XML文件格式之外的另一个选择。使用json-lib-2.4-jdk15.jar 在后台对JSON数据进行解析

lib下必须添加json所需的jar包:
json-lib-2.4-jdk15及其依赖jar包
相关jar包:
    commons-beanutils-1.8.0.jar
    commons-collections-3.1.jar
    commons-lang-2.5.jar
    commons-logging-1.1.1.jar
    ezmorph-1.0.6.jar
    json-lib-2.4-jdk15.jar
    json-lib-2.4-jdk15-javadoc.jar
    json-lib-2.4-jdk15-sources.jar

服务器端:
<%@ page language="java" import="java.util.*" 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);
}

JSONObject jsonObj=JSONObject.fromObject(jsonStr.toString());
String userName=jsonObj.getString("userName");
String password=jsonObj.getString("password");

String msg="";
if(userName.equals("11")&&password.equals("11")){
    msg="登陆成功'json方式'";
}else{
    msg="登陆失败'json方式'";
}
response.getWriter().write(msg);
%>

客户端:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
   
    <title>My JSP 'jsonrequest.jsp' starting page</title>
   
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">   
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
   <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="ext-all.js" ></script>
    <script type="text/javascript" src="locale/ext-lang-zh_CN.js"></script>
  </head>
 
  <body>
     <form  id="jsonloginForm">
    用户名:<input name="username" type="text">
  密码:<input type="password" name="password" >
<input type="button" value="登录" onclick="jsonlogin()">
  </form>
<script type="text/javascript">
function jsonlogin(){
         var requestConfig={
               url:"extajax/loginServerJson.jsp", //请求的服务器地址
              jsonData:getJson(), //发送JSON对象
               callback:function(options,success,response){
                  var msg=["请求是否成功:",success,"\n","服务器返回值:",response.responseText];
                  alert(msg.join(''));
               }
                 }
               Ext.Ajax.request(requestConfig);
    }
function getJson(){
         var name=document.forms[0].username.value;
         var pwd=document.forms[0].password.value;
         var jsonObj={
                  userName:name,
                  password:pwd
                 }
         return jsonObj; //将JSON对象返回
}
</script>
  </body>
</html>
分享到:
评论

相关推荐

    Ext.Ajax.request 小问题收集

    此外,`Ext.Ajax.request`还支持其他高级功能,如模拟表单提交(`method: 'POST', useDefaultXhrHeader: false, headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}`),超时设置(`...

    Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别

    总结,`Ext.FormPanel`的`getForm().submit()`更适合处理基于表单的数据提交,它简化了表单数据的处理和验证,而`Ext.Ajax.request`则提供了更高的灵活性,适用于各种HTTP请求,特别是当需要发送非表单数据或处理...

    Ext+JSP实现数据提交

    3. **Ajax请求**:使用`Ext.Ajax.request`方法发起异步请求,该方法支持POST或GET方式提交数据。在`action.js`中,可以配置请求的URL(如`action.html`),数据类型,以及成功或失败的回调函数。 4. **服务器端处理...

    Ext2.0.2的Ajax请求拦截示例

    在Ext JS中,Ajax请求是进行异步数据交互的基础,它允许页面在不刷新的情况下与服务器进行通信。本示例将深入探讨如何在Ext2.0.2中实现Ajax请求的拦截,以便在发送请求前或接收响应后执行自定义逻辑。 首先,我们...

    Ext.form.field.ComboBox结合Java、JSON实现AutoComplete

    本示例探讨如何利用Ext JS中的`Ext.form.field.ComboBox`组件,结合Java后端和JSON数据格式,来创建这样一个功能。 `Ext.form.field.ComboBox`是Ext JS框架中一个强大的组件,它提供了下拉列表的功能,可以用于创建...

    Ext3.1 Ajax 精简包以及使用方法

    3. **发送数据:** 在`Ext.Ajax.request`中,可以通过`params`字段传递数据,或者使用`jsonData`、`xmlData`等字段直接传入JSON或XML格式的数据。 4. **处理响应:** 成功或失败的回调函数接收两个参数,分别是响应...

    ext 前后台数据交互

    Ext前后台数据交互是通过Ext.data.Connection组件和Ext.Ajax.request方法来实现的。该方式可以将前台的请求发送到后台,并将后台的响应返回到前台。同时,我们可以使用Asp.NET后台来处理前台发送的请求,并将处理...

    ext前台接收action传过来的json数据示例

    ext前台接收action传过来的json数据 代码如下: Ext.Ajax.request({ method:’POST’,//请求方式 params : {dagl_code:dagl_code}, url:lcwPath+”/daxt/lcgl.shtml?method=getJgBycode”,//请求的url地址 success: ...

    ext几个实例

    Ext.AJAX.Request常用参数** - **url**: 服务器端接口地址。 - **params**: 请求参数,以键值对形式传递。 - **method**: HTTP请求方法,通常是GET或POST。 - **callback**: 接收响应后执行的函数,无论成功或失败...

    Ext.data专题

    创建了 **Ext.data.Connection** 实例后,可以调用 `request()` 函数来发送请求。该函数接受多个参数,如: - **url**: 请求的目标URL。 - **params**: 请求参数。 - **method**: 请求方法(GET、POST等)。 - **...

    深入浅出Ext_JS:数据存储与传输

    Ext.data支持多种数据格式,如Array、JSON、XML,以及不同的数据获取方式,如Memory(内存)、HTTP、ScriptTag等。对于不常见的数据源和协议,可以通过自定义reader和proxy来扩展其功能,例如DWRProxy使得EXT能够...

    senchatouch通过Ajax连接ashx

    总结来说,Sencha Touch通过Ext.Ajax.request方法为开发人员提供了构建动态数据交互应用程序的工具,支持从Web服务器获取数据,并将这些数据展示在移动设备上。该方法也能够与Sencha Touch的MVC框架相结合,提供更加...

    ext前台接收action传过来的json数据示例_.docx

    1. 使用`Ext.util.JSON.decode`函数:`var dagl_jg = Ext.util.JSON.decode(response.responseText).dagl_jg;` 这是EXT JS提供的内置函数,它将JSON字符串解码为JavaScript对象。 2. 使用`eval`函数:`var json = ...

    Ext 动态加载表单数据

    7. **Ajax请求**:使用`Ext.Ajax.request`方法发送异步请求到服务器获取JSON数据。在响应回调中,解析JSON并更新表单内容。 以下是一个基本的示例代码片段,展示了如何动态加载JSON数据到表单: ```javascript // ...

    extjs的数据传递

    var data = Ext.util.JSON.decode(response.responseText); console.log(data.clientName); ``` #### 五、ExtJS中的AJAX请求方法 ExtJS提供了一个强大的工具`Ext.Ajax.request`来发起HTTP请求,并处理响应。以下是...

    sencha touch2 ajax 获取数据

    除了使用`Store`,Sencha Touch2还提供了`Ext.Ajax.request`方法,这是一种更直接的使用AJAX的方式,适用于特定场景下的数据请求。 ```javascript Ext.Ajax.request({ method: 'POST', url: prefix + '/doc/...

    ext/和Ajax结合的说明和例子,获得后台数据,很适合大家

    ### ext/与Ajax结合获取后台数据的说明及实例 #### 一、引言 随着Web技术的不断发展,前端框架和Ajax技术的结合越来越普遍。在本文档中,我们将详细介绍如何利用ExtJS(简称ext/)与Ajax技术相结合来实现从前端...

Global site tag (gtag.js) - Google Analytics