POST方式发送ajax请求详解 - javascript， java， 各种新技术 - ITeye博客
博客分类：
在开始讲解之前，我假设你已经对ajax的基本原理有一定的理解，如果还有哪位朋友不怎么了解的话，请点击
首先我们先讲解下post和get发送方式的特点，
GET 方法提交数据不安全，数据置于请求行，客户端地址栏可见;
GET 方法提交的数据大小限制在255 个字符之内。为了验证以上说法，我们接下来做个试验。首先看如下代码：
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&
&title&test-get_post&/title&
&form name="Login" method="get" action="test.jsp"&
User ID: &input type="text" name="name"&&br&
Password: &input type="password" name="password"&
&input type="HIDDEN" name="from" value="welcome"&
&input type="submit" value="submit"&
接着我们输入一些数据，然后点击submit，如下图：
接下来我们再来看一下提交的这个http请求的详细信息：
由于上图我们可以看出，使用get方式发送的http请求，参数都是直接跟在URL后面清晰可见的，而且我们也不难看出，该http请求的body部分也是空的，只有head部分显示了一个http的基本信息。关于
GET 方法提交的数据大小是否限制在255 个字符之内，这里就不再做实验了，大家可以自己去实验。
接下来我们来看看POST 方法是如何提交数据的，POST方法提交的数据置于消息主体内，客户端不可见，
POST 方法提交的数据大小没有限制。我们对以上html稍做修改如下：
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&
&title&test-get_post&/title&
&form name="Login" method="Post" action="test.jsp"&
User ID: &input type="text" name="name"&&br&
Password: &input type="password" name="password"&
&input type="HIDDEN" name="from" value="welcome"&
&input type="submit" value="submit"&
接着我们输入一些数据，然后点击submit，如下图：
接下来我们再来看一下提交的这个http请求的详细信息：
由上图我们可以看出，使用post方式发送的http请求，参数不是跟在URL后面的，而是存放在http请求的body部分的，关于请求参数在http请求body中存放的形式类似get方式，见下图：
在简单的讲述了get和post方式的特点后，我们正式进入正题，即如何以post形式向server发送ajax请求，在发送请求之前，第一个我们需要解决的问题就是如何去搜集并组织指定form表单中的数据。
一般来说form中存放数据的控件主要是&input&，而这个&input&type很多，如‘submit’，‘hidden’， ‘password’， ‘text’，‘checkbox’， ‘radio’等。因此第一步我们要做的就是先写一个方法，将将form中各种类型的&input&将数据值给抠出来。具体见如下代码：
//获取指定form中的所有的&input&对象
function getElements(formId) {
var form = document.getElementById(id);
var elements = new Array();
var tagElements = form.getElementsByTagName('input');
for (var j = 0; j & tagElements. j++)
elements.push(tagElements[j]);
接着我们需要获取每个input对象的name-value对，代码如下：
function inputSelector(element) {
if (element.checked)
return [element.name, element.value];
function input(element) {
switch (element.type.toLowerCase()) {
case 'submit':
case 'hidden':
case 'password':
case 'text':
return [element.name, element.value];
case 'checkbox':
case 'radio':
return inputSelector(element);
接着我们就可以将所有这些input对象中的name-value对以图1-5中POSTDATA那样的格式组织起来。代码如下：
function serializeElement(element) {
var method = element.tagName.toLowerCase();
var parameter = input(element);
if (parameter) {
var key = encodeURIComponent(parameter[0]);
if (key.length == 0)
if (parameter[1].constructor != Array)
parameter[1] = [parameter[1]];
var values = parameter[1];
var results = [];
for (var i=0; i&values. i++) {
results.push(key + '=' + encodeURIComponent(values[i]));
return results.join('&');
function serializeForm(formId) {
var elements = getElements(formId);
var queryComponents = new Array();
for (var i = 0; i & elements. i++) {
var queryComponent = serializeElement(elements[i]);
if (queryComponent)
queryComponents.push(queryComponent);
return queryComponents.join('&');
接下来我们来创建一个form表单，里面包含各种input控件，代码如下：
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&
&%@page import="java.util.Enumeration"%&
&title&test-get_post&/title&
&script src="demo.js" type="text/javascript"&&/script&
&script type="text/javascript"&
var request = getXMLHttpRequest();
function getFormInfo() {
var postBody = serializeForm('Login');
var url = document.getElementById('Login').
request.open("post", url, true);
request.onreadystatechange = updateP
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
request.send(postBody);
function updatePage() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseT
alert(response);
alert("status is " + request.status);
&form id="Login" name="Login" method="post" action="result.jsp"&
User ID: &input type="text" name="name"&&br&
Password: &input type="password" name="password"&&br&
sex:&input type="radio" name="sex" value="man"& man &input type="radio" name="sex" value="woman"& woman&br&
interest:&input type="checkbox" name="interest" value="piu"&PIU &input type="checkbox" name="interest" value="dss"&DSS &input type="checkbox" name="interest" value="ddr"&DDR&br&
&input type="hidden" name="from" value="welcome"&&br&
&input type="button" name="submit" value="submit" onclick="getFormInfo();"&
另外值得注意的是，上述代码这句
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
非常重要，没有这句的话，server就无法正常读取postdata中的任何数据，因为如果在 HTTP 流中传递空白和标点之类的字符，则它们在接收端可能会被错误地解释。URL 编码将 postdata 中不允许使用的字符转换为等效字符实体；URL 解码会反转此编码过程。例如，当嵌入到要在 URL 中传输的文本块中时，字符 & 和 & 分别被编码为 %3c 和 %3e。
接着我看一下接收端result.jsp的代码：
&?xml version="1.0" encoding="ISO-8859-1" ?&
&%@page import="java.util.Enumeration"%&
&%@ page language="java" contentType="text/ charset=ISO-8859-1" pageEncoding="ISO-8859-1"%&
String name = request.getParameter("name");
String pwd = request.getParameter("password");
String sex = request.getParameter("sex");
String[] interest = request.getParameterValues("interest");
String from = request.getParameter("from");
&validation&
&name&&%=name %&&/name&
&password&&%=pwd %&&/password&
&sex&&%=sex %&&/sex&
&interest&&%
for (int i=0; i&interest. i++)
out.print(interest[i] + " ");
%&&/interest&
&from&&%=from %&&/from&
&/validation&
最后，我们点击submit，看一下输出结果：
到这里就差不多结束了，希望这篇文章能给大家带来一些帮助和启发，谢谢大家观赏。最后附上源码：
描述: 示例源码下载
下载次数: 408
浏览 81033
我注意到了3个细节：处理了组件重名，如name="interest"；&!--//& //--& 兼容不识别代码的浏览器；result.jsp：&?xml version="1.0" encoding="ISO-8859-1" ?& 告诉浏览器以xml解释内容。& 另外读这篇文章我们可以考虑以Servlet来实现响应。哎，我理解 处理了组件重名，如name="interest" 理解错了，我以为一次性获得name="interest"的所有元素的值哦，结果还是一个一个元素处理的
flyingfish42 写道
请问楼主用的是什么工具？
这个是firefox下的一个小插件 叫tamper data 简单实用说明可看这篇blog
/blog/656504
请问楼主用的是什么工具？这个是firefox下的一个小插件 叫tamper data 简单实用说明可看这篇blog/blog/656504
马背上 写道var request& = obj.是什么意思我运行，提示“target为空或不是对象”lz回的稍微有点晚，我已经试出来啦，不过还是谢谢啦，不过我还是不明白var request& = obj.是什么意思，target指的是什么啊，是form的那个target属性吗，obj对象指的又是什么呢马背上 写道马背上 写道var request& = obj.是什么意思我运行，提示“target为空或不是对象”lz回的稍微有点晚，我已经试出来啦，不过还是谢谢啦，不过我还是不明白var request& = obj.是什么意思，target指的是什么啊，是form的那个target属性吗，obj对象指的又是什么呢其实 在firefox浏览器中 当http响应返回的时候，浏览器端的 XMLHttpRequest对象会调用事先我们设置好的回调方法，在这里我们可以模拟一下这个情形：var request& = getXMLHttpRequest();Object eventObj = new Objct();eventObj.target =设置其他相关属性eventObj.xx=..eventObj.yy=..//当响应抵达浏览器时，浏览器自动调用类似以下代码request.onreadystatechange(eventObj);所以在回调方法中，其实 我们可以用this代替request，因为是request对象调用该回调方法的，所以我们的回调方法可以这么写：function updatePage(obj) {//这里的obj就是我们上面伪代码中的eventObj，因此我们可以obj.target调用 if (this.readyState == 4) { if (this.status == 200) { var response = this.responseT&&&&&&&&&&&&&&&
alert(response); } else
alert("status is " + this.status); }}
var request& = obj.是什么意思
我运行，提示“target为空或不是对象”
lz回的稍微有点晚，我已经试出来啦，不过还是谢谢啦，不过我还是不明白var request& = obj.是什么意思，target指的是什么啊，是form的那个target属性吗，obj对象指的又是什么呢
var request& = obj.是什么意思我运行，提示“target为空或不是对象”这个是我一点疏忽，我只在FF浏览器下做了实验，没考虑到IE，那索性把XMLHttpRequest放全局变量吧,改成这样就可以了var request = getXMLHttpRequest();function getFormInfo() { var postBody = serializeForm('Login'); var url = document.getElementById('Login'). request.open("post", url, true); request.onreadystatechange = updateP // request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); request.send(postBody);}function updatePage() { if (request.readyState == 4) { if (request.status == 200) { var response = request.responseT
alert(response); } else
alert("status is " + request.status); }}
if (element.checked)
element.checked 是什么意思?
因为checkbox 和 radio 等input控件是多选或者单选的 所以我们要取的的是客户选择后的值 也就是 checked后的那些value，所以不能直接像& text hidden等那样直接就去value，不然我们就有可能把用户没有checked的那些value也加进来，这显然是不对的，所以 对于这类控件就需要判断一下用户选择哪些值。
var url = document.getElementById('Login').&&
.action是什么意思？
等同于
&form action="xxx.jsp"&
设置form的action属性
& 上一页 1
传说の黄花菜
浏览: 168666 次
来自: 杭州
强烈顶贴……非常感谢楼主……
好文章，谢谢！~
另外关于Tamper Popup插件，我没有用这个插件。
forrest_lv 写道我注意到了3个细节：处理了组件重名， ...拒绝访问 | www.1398.org | 百度云加速
请打开cookies.
此网站 (www.1398.org) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(38ce-ua98).
重新安装浏览器，或使用别的浏览器JSF页面中使用js函数回调后台bean方法并获取返回值的方法
由于primefaces在国内使用的并不是太多，因此，国内对jsf做系统、详细的介绍的资料很少，即使有一些资料，也仅仅是对国外资料的简单翻译或者是仅仅讲表面现象（皮毛而已），它们的语句甚至还是错误的，很可能会误导使用者。
相对来说，看国内的那些仅仅是翻译过来的文章或书籍不如直接看国外的官方文档或资料来的实在，在我讲述jsf页面中如何使用js调用后台bean方法之前，先给大家说几个国外的资料。在primefaces官方网站上，你可以搜索到几乎所有你需要的东西，primefaces官网为： 如过觉得自己英语不好的童鞋，可以前往primefaces国内镜像网站查阅资料：
，只是国内的这个网站正在翻译中，有些东西还不完善；如果有想细致的了解primefaces的朋友，还可以下载primefaces的官方文档，最新的官方文档为5.2，全英文，我在这里给大家提供我下载好的primefaces官方文档： ,在这个文档里你可以通过他们的示例来组合出来很多有趣的东西。
好，接下来进入正文。
某些情况下，在开发jsf项目时，我们需要必须使用html组件来达到一些使用Jsf组件不能达到的目标。例如有时候我们希望，当触发某些html组件或标签时，触发后台方法甚至接收后台方法传过来的返回值。这回让我们很头疼，因为primefaces并没有给我们说如何使用js来调用后台bean方法。那么，我们就需要结合js和jsf同时才可以达到这个目的。
达到这个目的又两个方法。
1 使用jsf的inputHidden标签
这几乎算不上真正的js调用后台的方法，因为它无法向后抬bean传递值，但是简单的后台向页面传递数据可以使用这个方法
&h:inputHidden id="input" value="#{advancedQueryManager.aliaColums}"&&/h:inputHidden&
首先，在jsf中触发某个组件时，要及时update这个inputHidden标签，例如下面的组件
&p:selectOneMenu id="module"
value="#{advancedQueryManager.selectedModule}"&
&f:selectItem itemLabel="----" itemValue="" /&
&f:selectItems value="#{advancedQueryManager.allModule}" /&
&p:ajax event="change" update="input"
oncomplete="getVlue()"
listener="#{advancedQueryManager.onModuleChange()}"&&/p:ajax&
&/p:selectOneMenu&
这里面的组件就会当这个下拉值变化时，就会触发后台的方法
onModuleChange()
当，方法结束后，它会update（刷新）这个
h:inputHidden
如果你的这个inputHidden中的值是随下拉的变化和变化的呢，那么，你就可以在任何的js函数中获取到这个inputHidden中的值，然后进行处理，
function getVlue() {
/* document.getElementById("commBtn"). */
alert("a");
var aliaColums = document.getElementById("input").
dataJson = eval("(" + aliaColums + ")");
addqueryroot('.query', true);
我这里的inputHidden 盛的是一个json格式的字符串，我通过js函数就可以动态的获取这个json，进而进行其他的操作。当然，可以在任何html标签中调用这个js函数，然后获取这个json字符串。
2 使用commandButton来达到复杂的异步刷新取值
在这里说下，普通的html标签结合js函数结合commandButton可以达到什么效果呢？那就是在你触发任何html标签时，你都可以通过这个commandButton组件来将你在html标签中选定的值传递到后台，经过后台bean处理后，它会返回处理结果，js函数就可以接收到这个处理结果，然后再将这个结果整合到其他的组件中。
首先，创建这个隐藏的commandButton,注意，这个commandButton本身不具有隐藏的属性，可以通过其他有隐藏属性的组件将其包裹，以达到隐藏的目的，我通过一个div来达到这个目的。在这个commandButton中，我们发现，action的作用就是当点击这个commandButton时，它会调用后台方法，而attribute中的name 属性和value属性的作用会在下面将。
&div id="hiddenForm" style="display:"&
&p:commandButton id="command"
actionListener="#{advancedQueryManager.testReturn}"
oncomplete="handleComplete(xhr, status, args)"&
&f:attribute name="attrname1" value="liu" /&
&f:attribute name="attrname2" value="bei" /&
&/p:commandButton&
然后我们需要一个普通的html标签，就以一个普通的html
button为例：
&input type="button" value="回调测试" onclick="test()" /&
然后写一个js函数，来连接这个普通的button和jsf组件commandButton
function test() {
$('#command').click();
这个函数的意思就是，当你点击这个"回调测试"的按钮时，它就相当于触发了jsf的cimmandButton按钮，这时，commandButton中的两个
&f:attribute name="attrname1" value="liu" /&
中的两个属性就会自动绑定成一个类似于map形式的数据，name属性的值作为key，value中的值作为map中的value，它们将会被传递至后台。
然后，后台的bean 中需要有方法来接收两个值：
public void testReturn(ActionEvent event) {
String attrvalue1 = (String) event.getComponent().getAttributes()
.get("attrname1");
String attrvalue2 = (String) event.getComponent().getAttributes()
.get("attrname2");
System.out.println(attrvalue1);
System.out.println(attrvalue2);
RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.addCallbackParam("isValid", true);
在上面的代码中，我们可以看到，java程序已经成功的接收前端页面传过来的值，它最后也返回了一个类是于map格式的值，key为：isValid，value 为：true
最后，我们要写一下页面如何接收后台传递过来的值：
&script type="text/javascript"&
function handleComplete(xhr, status, args) {
var isValid = args.isV
alert(isValid);
接下来，就会发现不仅仅后台可以正常打印出前端页面中的那两个值，同时前端的js函数也可以打印出后台传过来的值，当然，同样的，从前端传递到后台的值的个数和形式，你可以自己改，同时从后台接收到的数据，你也可以随意的进行任何操作。
但是请注意，这个
p:commandButton
组件有个问题，就是你不可以动态的通过js函数来将一些值赋给这个组件，但是这个组件里的值可以接受后台的属性值
&f:attribute name="attrname1" value="#{bean.val}" /&
这样其实也并没有达到我们想要通过js来传给后台bean的目的，接下来的方法，就可以完全达到通过js动态的传值给后台bean方法，bean方法处理完返回数据给js。
3 使用p:remoteCommand来达到复杂的异步刷新取值
大家请注意，这个方法可以真正的解决在jsf中通过js调用后台bean方法并获取bean方法返回值的问题。
同样，首先我们要写两个jsf组件，来和后台bean结合
&h:inputHidden id="input1" value="#{advancedQueryManager.vals}"&&/h:inputHidden&
&p:remoteCommand name="processSelection"
action="#{advancedQueryManager.testReturn}" update=":input1"
oncomplete="processResult();" /&
解释一下，上面的的这个inputHidden的作用是接收后台bean处理后的返回值。remoteCommand的作用是将js中的动态的值传递到后台bean方法。
function processResult() {
//接收后台bean方法中传递过来的处理结果，接收方法是获取inputHidden中的值，并可根据自己的业务继续处理
alert($('#input1').val());
function makeSelection() {
//普通的html组件调用这个js
//将想要传递到后台的动态值封装成json格式的值，传给p:remoteCommand,然后由这个组件传给bean方法
processSelection([ {name : 'setVal',value : 'getIt'} ]);
js函数使用方法在代码中，谁不懂可以再艾特我，这里不再解释。
最后是后台bean方法代码：
public void testReturn() {
String selectedValue = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("setVal");
System.out.println("------&"+selectedValue);
//拦截到这个页面传过来的值后可以进行你自己的业务处理
//并将处理结果返回给vals，这个vals是这个bean中的一个属性
vals = "getResult";
至此，jsf中使用js函数将普通的html组件的值动态的传递到后台bean方法并接受后台处理结果已经成功得到解决。
Copyright (C) , All Rights Reserved.
版权所有 闽ICP备号
processed in 0.038 (s). 13 q(s)