`
gqzyyxh
  • 浏览: 9371 次
  • 性别: Icon_minigender_1
  • 来自: 常州
文章分类
社区版块
存档分类
最新评论

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

阅读更多
通过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;
}
分享到:
评论

相关推荐

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

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

    Ajax传递中文参数到后台乱码的有效解决方法

    使用Ajax传递中文参数,如果不对参数进行处理的话,传到后台会变成乱码,经测试可以使用如下方法 这里是以jquery.autocomplete插件中获取输入框中的数据传到后台为例: 注意要对中文使用encodeURI编码两次 代码如下:...

    ajax中后台请求函数源代码

    附件中的代码把异步请求包装成为update函数,举例: update(myDivObj,"myUrl","Post Params"); 这样,服务器端的"MyUrl“的返回结果就会自动写到myDivObj中了。第三个参数使用Post方法传递的信息。

    ajax中send的用法

    Ajax中send方法参数的使用 一般情况下,使用Ajax提交的参数多是些简单的字符串,可以直接使用GET方法将要提交的参数写到... 需要注意的是根据提交方式的不同,两种提交方式分别调用后台的doGet方法和doPost方法。

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

    前后台之间的参数传递一直是个问题,经过一段时间的实验琢磨,终于搞定,先把经验拿出来与大家分享,希望可以让新手朋友们少走弯路

    原生JS实现Ajax通过POST方式与PHP进行交互的方法示例

    主要介绍了原生JS实现Ajax通过POST方式与PHP进行交互的方法,涉及ajax使用post方式与后台交互及php数据接收、处理、查询数据库等相关操作技巧,需要的朋友可以参考下

    JQuery的Ajax中Post方法传递中文出现乱码的解决方法

    本文实例讲述了JQuery中Post传递中文出现的解决方法,即乱码ajax与jquery.ajax中文参数post传递乱码处理方法。分享给大家供大家参考。具体分析如下: 问题一: 今天在做项目时,需要用到Ajax,之前我在用GET方式传递...

    ajax 提交数据到后台jsp页面及页面跳转问题

    ajax 提交数据到后台jsp页面及页面跳转问题 我logincheck.jsp页面取传参数代码: String user=request.getParameter("user1"); String pwd=request.getParameter("pwd1"); login.jsp input 取2参数何用ajax 传给...

    Extjs ajax同步请求时post方式参数发送方式

    一般参数传递通过url后面跟后台也能取到,不过看到send参数也可以发送参数,试验了一下服务器端接受不到发送的参数,在firebug里看到发送的请求post部分是一个串,不太象正常发送的参数。

    探讨.get .post .ajax ztree 还有后台servlet传递数据的相关知识

    主要介绍了探讨.get .post .ajax ztree 还有后台servlet传递数据的相关知识,需要的朋友可以参考下

    ajax异步读取后台传递回的下拉选项的值方法

    今天小编就为大家分享一篇ajax异步读取后台传递回的下拉选项的值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    基于form-data请求格式详解

    在后端与前端约定好application/json格式传递数据时,因为后台是go强类型语言,在定义api接口时,某些字段要求是整型类型,但是对于前端来说输入框或者从url中的search取到的参数都是字符串,不得不进行前端类型转换...

    ajax中设置contentType: “application/json”的作用

    最近在做项目交互的时候,刚开始向后台传递数据返回 415 ,后来百度添加了 contentType:“application/json“ 之后返回400,然后把传输的数据格式改为json字符串就传输成功了,现在我们来看看 contentType:...

    PHP培训教程之AJAX技术.docx

    9、在Ajax应用中信息如何在浏览器和器之间传递的 通过XML数据或者字符串 10、在浏览器端如何得到器端响应的XML数据。 XMLHttpRequest对象的responseXMl属性 12、XMLHttpRequest对象在IE和Firefox中创建的不同 有,...

    有关Ajax中get和post的使用问题

    缓存:当每次访问的url相同,客户端直接读取本地缓存里面的内容,即使后台数据变化前台也不会有变化; 解决方法:在?后面链接一个num=【随机数Math.random()】或者num=【时间戳new Date().getTime()】,’1....

    JQuery中Ajax的Post提交在IE下中文乱码的解决方法

    在JQuery的Ajax POST请求中,进行请求,其中的中文在后台,显示为乱码,在FF/Chrome中,可以正常传递中文,但是在IE下,则存在问题

    详解JQuery Ajax 在asp.net中使用总结

    1、 通过使用get或者post方法,传递页面地址为url参数的值,并附带一些标记参数,直接请求。这种方式的Ajax被一些人誉为“假的Ajax”,表面上没有刷新页面,其实后台的执行情况和刷新 页面的效果是一样的。 其实这种...

    解决Vue axios post请求,后台获取不到数据的问题方法

    最近做项目,需要用到vue,后台是php,第一次使用axios进行请求,本以为同ajax一样,会很简单,但是结果往往不让人满意啊,get请求很简单,这里就不说了,主要说下 post请求方式。 使用axios进行post请求,后台居然...

Global site tag (gtag.js) - Google Analytics