()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">
08 function 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="提交表单" onClick="saveUserInfo()">
88 </form>
89 </body>
90 </html>

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

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

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">
08 function 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="获取服务器变量" 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 实例的更多相关文章

  1. html表单中的input元素的两种提交方式比较(get/post)

    Http存在两种最常用的提交方式:Get和Post(电话面试有问到两种提交方式的区别) 什么是HTTP? 超文本传输协议(HTTP)的设计目的是保证客户机与服务器之间的通信. HTTP 的工作方式是客 ...

  2. form表单中get和post两种提交方式的区别

    一.form表单中get和post两种提交方式的区别? 1.get提交表单中的内容在链接处是可见的.post不可见 2.post相比于get是安全的 3.post不收限制大小,get有限制大小(黑马视 ...

  3. Web APi之认证（Authentication）两种实现方式【二】（十三）

    前言 上一节我们详细讲解了认证及其基本信息,这一节我们通过两种不同方式来实现认证,并且分析如何合理的利用这两种方式,文中涉及到的基础知识,请参看上一篇文中,就不再叙述废话. 序言 对于所谓的认证说到底 ...

  4. 转 Web APi之认证（Authentication）两种实现方式【二】（十三）

    前言 上一节我们详细讲解了认证及其基本信息,这一节我们通过两种不同方式来实现认证,并且分析如何合理的利用这两种方式,文中涉及到的基础知识,请参看上一篇文中,就不再废叙述废话. 序言 对于所谓的认证说到 ...

  5. form表单两种提交方式的不同

      我们在使用<Form>表单的时候,最常用的提交方式就是Get和Post.我们都知道这两种方式最大的差别就是安全性,除此之外,它们还有哪些其他的区别,你知道吗?   在<Form& ...

  6. JFreeChart与AJAX+JSON+ECharts两种处理方式生成热词统计可视化图表

    本篇的思想:对HDFS获取的数据进行两种不同的可视化图表处理方式.第一种JFreeChar可视化处理生成图片文件查看.第二种AJAX+JSON+ECharts实现可视化图表,并呈现于浏览器上.   对 ...

  7. Web APi之认证（Authentication）两种实现方式后续【三】（十五）

    前言 之前一直在找工作中,过程也是令人着实的心塞,最后还是稳定了下来,博客也停止更新快一个月了,学如逆水行舟,不进则退,之前学的东西没怎么用,也忘记了一点,不过至少由于是切身研究,本质以及原理上的脉络 ...

  8. Android 开发之旅：view的几种布局方式及实践

    本文的主要内容就是分别介绍以上视图的七种布局显示方式效果及实现,大纲如下: 1.View布局概述 2.线性布局(Linear Layout) 2.1.Tips:android:layout_weigh ...

  9. Javaweb学习笔记——（六）——————xml中jaxp两种解析方式和dom4j运用

    1.xml的scheam约束 dtd的语法:<!ElEMENT 元素名称 约束> **schema符合xml的语法,xml语句 **一个xml中可以有多个schema,多个schema使用 ...

随机推荐

  1. jdk环境变量配置至第一个简单程序运行成功

    桌面右键单击我的电脑,属性,高级,环境变量,然后再系统变量中配置(也可在用户变量中配置) 在配置环境变量时限查看是否已存在变量名称,有则添加路径,没有则创建再添加路径 /* JAVA_HOME% C: ...

  2. 第五章：C++程序的结构

    主要内容: 1.作用域与可见性 2.对象的生存期 3.数据与函数 4.静态成员 5.共享数据的保护 6.友元 7.编译预处理命令 8.多文件结构和工程 作用域:函数原型作用域.块作用域.类作用域.文件 ...

  3. SQL练习题笔记

    查找最晚入职员工的所有信息 select * from employees order by hire_date desc limit 1 查找入职员工时间排名倒数第三的员工所有信息 select * ...

  4. Android开发——查询/杀死手机里正在运行的进程

    0. 前言 以前有同学好像做过一个叫"自习君"的App,开启后自动检测用户这一天的自习时间,在学校里宣传广告还打了不少.其实实现原理非常简单,在SQlite数据库(也可以通过文件) ...

  5. Android弹幕编程设计实现的解决方案（一）

     Android弹幕编程设计实现的解决方案(一) 在现在的一些视频类网站.视频类直播网站,比如A站和B站,当视频在播放的时候,会在屏幕上出现一些滚动的字幕,这些字幕是UGC,通常是用户的评论,称之 ...

  6. Light oj-1259 - Goldbach`s Conjecture

                                                                                    1259 - Goldbach`s Co ...

  7. 洛谷P1145 约瑟夫

    题目描述 n个人站成一圈,从某个人开始数数,每次数到m的人就被杀掉,然后下一个人重新开始数,直到最后只剩一个人.现在有一圈人,k个好人站在一起,k个坏人站在一起.从第一个好人开始数数.你要确定一个最小 ...

  8. Nginx,Apache,Tomcat区别

    Nginx:一款能承受高并发的HTTP服务器,异步的,多个连接(万级别)可以对应一个进程,进行响应.基于事件驱动模型. Nginx优点:负载均衡.反向代理.处理静态文件优势. Apache:相对于Ng ...

  9. 通过调用C语言的库函数与在C代码中使用内联汇编两种方式来使用同一个系统调用来分析系统调用的工作机制

    通过调用C语言的库函数与在C代码中使用内联汇编两种方式来使用同一个系统调用来分析系统调用的工作机制 前言说明 本篇为网易云课堂Linux内核分析课程的第四周作业,我将通过调用C语言的库函数与在C代码中 ...

  10. Codeforces 659A Round House【水题，细节】

    题目链接: http://codeforces.com/contest/659/problem/A 题意: 一个圈,按逆时针编号,给定起点,方向和步数,问终点在几号? 分析: 很简单的模拟...注意答 ...