首页 > 代码库 > web 开发之js---ajax 中的两种提交方式ajax post 和 ajax get 实例

web 开发之js---ajax 中的两种提交方式ajax post 和 ajax get 实例

2024-07-28 09:32:06   220人阅读

()post

http://04101334.iteye.com/blog/637695/

()get

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(‘&‘);
}

http://04101334.iteye.com/blog/637695/

() get,post 的区别

http://blog.csdn.net/zygsee/article/details/5264103

http://bbs.phpchina.com/thread-138396-1-1.html 一般不用get 而用post的原因

学习 Ajax 那么多的理论，这里有两个不错的 Ajax Post 与 Get 的实例，让我们去学习下吧。

先是学习 Ajax 的 Post，程序效果请参看 Ajax 的 Post 传值。

01<html>
02<head>
03<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
04<title>Ajax Post 传值</title>
05</head>
06 
07<script language="javascript">
08function saveUserInfo()
09{
10    //获取接受返回信息层
11    var msg = document.getElementById("msg");
12 
13    //获取表单对象和用户信息值
14    var f = document.user_info;
15    var userName = f.user_name.value;
16    var userAge   = f.user_age.value;
17    var userSex   = f.user_sex.value;
18 
19    //接收表单的URL地址
20    var url = "ajax_output1.php";
21 
22    //需要POST的值，把每个变量都通过&来联接
23    var postStr   = "user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;
24 
25    //实例化Ajax
26    //var ajax = InitAjax();
27 
28 
29    var ajax = false;
30    //开始初始化XMLHttpRequest对象
31    if(window.XMLHttpRequest)
32    {   //Mozilla 浏览器
33        ajax = new XMLHttpRequest();
34        if (ajax.overrideMimeType)
35        {   //设置MiME类别
36            ajax.overrideMimeType("text/xml");
37        }
38    }
39    else if (window.ActiveXObject)
40    {   // IE浏览器
41        try
42        {
43            ajax = new ActiveXObject("Msxml2.XMLHTTP");
44        }
45        catch (e)
46        {
47            try
48            {
49                ajax = new ActiveXObject("Microsoft.XMLHTTP");
50            }
51            catch (e) {}
52         }
53    }
54    if (!ajax)
55    {   // 异常，创建对象实例失败
56        window.alert("不能创建XMLHttpRequest对象实例.");
57        return false;
58    }
59 
60    //通过Post方式打开连接
61    ajax.open("POST", url, true);
62 
63    //定义传输的文件HTTP头信息
64    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
65 
66    //发送POST数据
67    ajax.send(postStr);
68 
69    //获取执行状态
70    ajax.onreadystatechange = function()
71    {
72        //如果执行状态成功，那么就把返回信息写到指定的层里
73        if (ajax.readyState == 4 && ajax.status == 200)
74        {
75            msg.innerHTML = ajax.responseText;
76        }
77    }
78}
79</script>
80 
81<body >
82<div id="msg"></div>
83<form name="user_info" method="post" action="">
84姓名：<input type="text" name="user_name" /><br />
85年龄：<input type="text" name="user_age" /><br />
86性别：<input type="text" name="user_sex" /><br />
87<input type="button" value=http://www.mamicode.com/"提交表单" onClick="saveUserInfo()">
88</form>
89</body>
90</html>

然后是 Ajax 的 Get，用途是从服务器获取值。

程序效果请参看 Ajax 的 Get 传值。

view source
print?
01<html>
02<head>
03<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
04<title>Ajax Get 传值</title>
05</head>
06 
07<script language="javascript">
08function saveUserInfo()
09{
10    //获取接受返回信息层
11    var msg = document.getElementById("msg");
12 
13    //获取表单对象和用户信息值
14    var f = document.user_info;
15    var userName  = f.user_name.value;
16    var userAge   = f.user_age.value;
17    var userSex   = f.user_sex.value;
18 
19    //接收表单的URL地址
20    var url = "ajax_output2.php? user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;
21 
22    //实例化Ajax
23    //var ajax = InitAjax();
24 
25    var ajax = false;
26    //开始初始化XMLHttpRequest对象
27    if(window.XMLHttpRequest)
28    {
29        //Mozilla 浏览器
30        ajax = new XMLHttpRequest();
31        if (ajax.overrideMimeType)
32        {//设置MiME类别
33            ajax.overrideMimeType("text/xml");
34        }
35    }
36    else if (window.ActiveXObject)
37    {   // IE浏览器
38        try
39        {
40            ajax = new ActiveXObject("Msxml2.XMLHTTP");
41        }
42        catch (e)
43        {
44            try
45            {
46                ajax = new ActiveXObject("Microsoft.XMLHTTP");
47            } catch (e) {}
48        }
49    }
50    if (!ajax)
51    {  
52        // 异常，创建对象实例失败
53        window.alert("不能创建XMLHttpRequest对象实例.");
54        return false;
55    }              
56 
57    //通过Post方式打开连接
58    ajax.open("GET", url, true);
59 
60    //发送GET数据,已经在URL中赋了值所以send那里只要加个空参.
61    ajax.send(null);
62 
63    //获取执行状态
64    ajax.onreadystatechange = function()
65    {
66        //如果执行状态成功，那么就把返回信息写到指定的层里
67        if (ajax.readyState == 4 && ajax.status == 200)
68        {
69            msg.innerHTML = ajax.responseText;
70        }
71    }
72}
73</script>
74 
75<body>
76<div id="msg"></div>
77<form name="user_info" method="post" action="">
78<input type="text" name="user_name" style="display:none;" />
79<input type="text" name="user_age" style="display:none;" />
80<input type="text" name="user_sex" style="display:none;" />
81<input type="button" value=http://www.mamicode.com/"获取服务器变量" onClick="saveUserInfo()">
82</form>
83</body>

ajax_output2.php

1<?
2     $user_name = "Gonn";
3     echo $user_name;
4     $user_age = "24";
5     echo $user_age;
6     $user_sex = "Man";
7     echo $user_sex;
8?>

 

 

http://www.nowamagic.net/ajax/ajax_ExamplesOfPostAndGet.php

web 开发之js---ajax 中的两种提交方式ajax post 和 ajax get 实例


联系
我们