刚刚研究了 那个ajax post传参的用法 就想 其实可以写个函数的 直接传递三个参数 ----div层（需要无刷新加载的层不一定要div），处理post的服务器端程序地址，表名称。
下面 就是全部代码
<!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>
<Meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>爱乐ajax例子</title>
</head>
<script language="javascript">
//这里是整个处理表单元素加载到变量的模块开始
//获取指定form中的所有的<input>对象
function getElements(formId)
{
var form = document.getElementById(formId);
var elements = new Array();
var tagElements = form.getElementsByTagName('input');
for (var j = 0; j < tagElements.length; j++)
{
elements.push(tagElements[j]);
}
return elements;
}
//获取单个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);
}
return false;
}
//组合URL
function serializeElement(element)
{
var method = element.tagName.toLowerCase();
var parameter = input(element);
if (parameter)
{
var key = encodeURIComponent(parameter[0]);
if (key.length == 0) return;
if (parameter[1].constructor != Array)
parameter[1] = [parameter[1]];
var values = parameter[1];
var results = [];
for (var i=0; i<values.length; 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.length; i++)
{
var queryComponent = serializeElement(elements[i]);
if (queryComponent)
queryComponents.push(queryComponent);
}
return queryComponents.join('&');
}
//这里是整个处理表单元素加载到变量的模块的结束（如果是研究的话 先不要管上面直接看下面的学习就行了）
function ajax_post(div_al,url,form_name)
//div_al层的id,arr是post传递的值(可以多个参数,参数间用&链接，例如"username&passwore$email"),url是目标地址
{
var div_al=div_al;
//接收表单的URL地址
var url = url;
//获取接受返回信息层
var form_name = form_name;
var params = serializeForm(form_name);
//需要POST的值，把每个变量都通过&来联接
var postStr = params;
//实例化Ajax
//var ajax = InitAjax();
var ajax = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest)
{ //Mozilla 浏览器
ajax = new XMLHttpRequest();
if (ajax.overrideMimeType)
{//设置MiME类别
ajax.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
ajax = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!ajax) { // 异常，创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
//通过Post方式打开连接
ajax.open("POST",true);
//定义传输的文件HTTP头信息
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送POST数据
ajax.send(postStr);
//获取执行状态
ajax.onreadystatechange = function() {
//如果执行状态成功，那么就把返回信息写到指定的层里
if (ajax.readyState == 4 && ajax.status == 200)
{
document.getElementById(div_al).innerHTML = ajax.responseText;
}
}
}
</script>
<body >
<div id="al">测试</div>
<form name="user_al" method="post" action="">
账号：<input type="text" name="username" /><br />
密码：<input type="password" name="password" /><br />
邮箱：<input type="text" name="email" /><br />
<input type="button" value="提交" onClick="ajax_post('al','ajax_cs.PHP','user_al');">
</form>
</body>
</html>
下面是接收部分代码
<?PHP header('Content-Type:text/html;charset=GB2312'); //ajax返回默认为utf-8，这里在返回头里面指出编码为GB2312以免汉字乱码 echo "你输入的信息为：</br>"; echo "账户".$_POST['username']."</br>"; echo "密码".$_POST['password']."</br>"; echo "邮箱".$_POST['email']."</br>"; ?>
原文链接：https://www.f2er.com/ajax/166815.html