`

通过ajax访问后台----参数通过post方式传递

    博客分类:
  • java
阅读更多

通过ajax访问后台----参数通过post方式传递
1,前台页面:
<div id="testDiv">
<table>
   <tr><td onclick="testAjaxPost();">...</td></tr>
   ... ... ... ...
</table>
</div>

2,JS方法:
// ajax对象
var xmlHttp;
function testAjaxPost() {
var url = "DevelopWeek!dealChartData.action";
// 下面为需要传递的参数,encodeURIComponent为解决中文乱码的方法
var param = "kpiID="+kpiID+"&kpiType="+kpiType+"&strFourWeek="+strFourWeek+"&kpiDesc="+encodeURIComponent(kpiDesc) + "&kpiDimUniStr=is null";
ajaxCommon(url, param, 'freshenKpiChart');
}
// ajax局部刷新
function ajaxCommon (url, param, methodName) {
createHttpRequest();
if (methodName == 'handleState') {
   xmlHttp.onreadystatechange = handleState;
   xmlHttp.open('post', url, true);
   xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // post方式传递参数,就必须加上这一句
   xmlHttp.send(param); // post方式传递参数,就必须把参数放到send里
}
if (methodName == 'freshenKpiChart') {
   // xmlHttp2是另外一个请求,可以创建多个
   xmlHttp2.onreadystatechange = freshenKpiChart;
   xmlHttp2.open('post', url, true);
   xmlHttp2.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // post方式传递参数,就必须加上这一句
   xmlHttp2.send(param); // post方式传递参数,就必须把参数放到send里
}
}
// 创建ajax对象
function createHttpRequest () {
try {
   // Firefox, Opera 8.0+, Safari
   xmlHttp = new XMLHttpRequest();
} catch (e) {
   // Internet Explorer
   try {
    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
    try {
     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {  
     alert("您的浏览器不支持AJAX!");
     return false;
    }
   }
}
}
function handleState () {
try {
   if(xmlHttp.readyState == 4){
    if(xmlHttp.status == 200){
     var data = xmlHttp.responseText; // 取得后台返回的数据,可以是JSON数据,拼的表格,单个字符串等等
     var dataArray = new Array();
     // dataArray[0]为fourWeekList,dataArray[1]为weekNumList,dataArray[2]为theadList,dataArray[3]为maxNum
     dataArray = data.split('==');
     document.getElementById('testDiv').innerHTML = dataArray[1]; // 局部刷新表格,假设后台返回来的数据是拼成的表格
    }else{
     window.alert("请求页面异常");
    }
   }
} catch(error) {
   error.message;
}
}
function freshenKpiChart () {
try {
   if(xmlHttp.readyState == 4){
    if(xmlHttp.status == 200){
     var res = xmlHttp2.responseText; // 取得后台返回的数据,可以是JSON数据,拼的表格,单个字符串等等
     .................................
    }else{
     window.alert("请求页面异常");
    }
   }
} catch(error) {
   error.message;
}
}

3,后台的java代码:
DevelopWeek.java中的dealChartData方法
public String dealChartData() throws IOException {
HttpServletResponse response = ServletActionContext.getResponse();
HttpServletRequest request = ServletActionContext.getRequest();

// 方式一:循环取出post方式传来的参数
for (Enumeration e = request.getParameterNames(); e.hasMoreElements();) {
   e.hasMoreElements();
   String h = (String) e.nextElement();
   String v = request.getParameter(h);
   String mm = java.net.URLDecoder.decode(v, "UTF-8");
   System.out.println("请求参数: " + h + " = " + mm);
}
/* // 方式二:直接通过request也可以取出来
System.out.println("kpiID: " + request.getParameter("kpiID"));
System.out.println("kpiType: " + request.getParameter("kpiType"));
System.out.println("kpiDesc: " + request.getParameter("kpiDesc"));
System.out.println("strFourWeek: " + request.getParameter("strFourWeek"));
System.out.println("kpiDimUniStr: " + request.getParameter("kpiDimUniStr"));
*/
// 方式三:struts2中不用自己取值,会自动set到值栈中,可以直接得到
/* System.out.println("kpiID: " + this.kpiID);
System.out.println("kpiType: " + this.kpiType);
System.out.println("strFourWeek: " + this.strFourWeek);
System.out.println("kpiDimUniStr: " + this.kpiDimUniStr);
*/
/////////////////其实,不管是通过get,还是post方式提交请求,都是通过request来取值的////////////////////

StringBuilder kpiWeekChartData = new StringBuilder();
kpiWeekChartData = selectTableChartData();
String table_ChartListJson = Utils.toJsonString(this.table_ChartList);
response.setCharacterEncoding("UTF-8");
// 需要返回多组数据,可以用某些特定的字符(==)区分,前台可以通过该字符(==)用split分割返回值
response.getWriter().write("{" + "\"chartTableJsonData\"" + ":" + table_ChartListJson + "}" + "==" + kpiWeekChartData);
return null;
}

分享到:
评论

相关推荐

    jquery ajax 向后台传递数组参数示例

    本文将深入讲解如何在jQuery AJAX中向后台传递数组参数,并提供示例代码。 首先,理解问题的关键在于JavaScript数组在传递给后台时,如果数组内包含的是对象,会被转化为`[object Object]`的字符串形式。这是因为...

    unigui_ajax Post Callback -返回参数 HTMLFrame 事件_1

    1. **创建Ajax请求**:设置URL,参数,数据类型等,然后使用Unigui提供的API发起POST请求。 2. **定义回调函数**:在请求完成后,定义一个函数来处理服务器的响应。这可能包括解析响应数据,检查状态码,处理错误等...

    前台ajax与后台json传递

    "前台Ajax与后台Json传递"这个主题就是关注如何高效地实现这一交互过程。Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况下,实现局部数据的更新,而Json(JavaScript Object Notation...

    asp.net 利用jquery-ajax调用后台方法

    AJAX(Asynchronous JavaScript and XML)的核心是通过JavaScript在后台与服务器进行少量数据交换,无需重新加载整个网页。 在ASP.NET中,我们通常创建一个WebMethod或使用ASP.NET MVC的ActionResult来作为AJAX的...

    ajax-demo-java EE

    **Ajax 概述** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。...通过对这个项目的学习,开发者可以深入理解Ajax在实际项目中的应用和实现方式。

    ajax 前台js调用后台方法

    ### AJAX 前台JS调用后台方法详解 随着互联网技术的发展,前后端分离成为一种趋势,而异步请求作为前后端交互的重要手段之一,在实际开发中占据着重要的位置。AJAX(Asynchronous JavaScript and XML)是一种在无需...

    AJAX基础教程-AJAX编程(Javascript实现).rar

    - **发送请求**:通过`send()`方法向服务器发送请求,如果是GET请求,参数可以为空;如果是POST请求,需要传递数据。 - **接收响应**:在请求发送后,可以通过监听`onreadystatechange`事件,检查`readyState`属性...

    ajax--测试

    通过以上知识点,我们可以理解Ajax的基本原理和使用方式。在“ajax--测试”项目中,可能包含了使用Ajax进行数据交互的示例代码,通过实践这些代码,可以加深对Ajax的理解,并能应用于实际项目中。

    AJAX简单实例--入门级小例

    对于POST请求,数据则在`send()`方法中作为参数传递。 - **接收响应**:通过监听`onreadystatechange`事件,当`readyState`属性变为4(表示请求已完成)且`status`为200(表示请求成功)时,读取`responseText`或`...

    Jquery Ajax 前后台数据传输

    本文将详细介绍使用jQuery AJAX实现三种不同方式的前后台数据传输,以及如何处理界面内容的传值和返回值。 1. **基本的AJAX调用** jQuery提供了`$.ajax()`方法,它是所有其他AJAX功能的基础。例如,我们可以使用...

    ajax经典demo-初学者的好东西

    我们可以通过XMLHttpRequest对象的`open()`方法设置请求类型(GET或POST)、URL和是否异步执行,然后用`send()`方法发送请求。服务器返回的数据可以通过`responseText`或`responseXML`属性获取。 4. **数据解析与...

    Asp.net中JQuery、ajax调用后台方法总结

    在上面的代码中,我们使用 `$.ajax()` 方法来调用后台方法 `RecordData`,并将参数 `browersType` 传递给后台方法。 在后台,需要使用 `[System.Web.Services.WebMethod()]` 特性来标记方法为可被调用的。示例代码...

    Ajax学习笔记---3种Ajax的实现方法【推荐】

    虽然XML最初被提及在Ajax技术中,但在实际应用中,JSON(JavaScript Object Notation)更常被用来传递数据,因为它的解析效率更高且更易于使用。 ### Ajax的历史 Ajax技术起源于Web前端的发展。网景公司(Netscape...

    AJAX基础教程-4 GetAndPostExample

    总结一下,"GetAndPostExample"是一个展示AJAX GET和POST请求的实例,通过阅读源码和理解示例,开发者可以更好地理解和运用AJAX技术,为Web应用添加更丰富的交互功能。同时,这个例子也提醒我们,在进行AJAX请求时,...

    ajax请求后台接口数据与返回值处理js的实例讲解

    在$.ajax方法中,通过data参数传递键值对给后端服务,type参数指定了发送请求的方式为POST。在success回调函数中,可以处理服务器返回的数据,通常是JSON格式的数据。根据返回数据中字段SuccessCode的值,执行不同的...

    AJAX基础教程-3 Dynamic Content

    对于POST请求,数据通常在`send()`方法中作为参数传递。 3. **处理响应**:通过监听`onreadystatechange`事件,当请求状态改变时,检查`readyState`(表示请求进度)和`status`(表示HTTP状态码),确认请求是否成功...

    jsp中利用jquery+ajax在前后台之间传递json格式参数.docx

    在本示例中,主要讲解如何通过AJAX将JSON格式的参数传递给服务器,并接收服务器返回的JSON数据。 首先,前端(客户端)使用jQuery的AJAX方法来发送请求。在jQuery中,`$.ajax()`函数用于发起异步HTTP请求。关键的...

    ajax传递list对象数组

    本篇将详细介绍如何通过AJAX来传递一个List对象数组,并解析其中涉及到的关键技术点。 #### 二、知识点概览 1. **前端JavaScript处理List对象数组** 2. **使用jQuery的$.ajax方法发送POST请求** 3. **后端接收List...

    AJAX开发简略-配有相关源代码-网络分享

    4. **发送请求**:调用`send()`方法,如果使用POST方式,可以传递参数。 5. **处理响应**:在回调函数中,检查`readyState`属性(表示请求的当前状态)和`status`属性(表示HTTP状态码,200表示成功),并读取`...

Global site tag (gtag.js) - Google Analytics