()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. scanf_s读取键盘输入字符串失败

    #include<stdio.h> int main() { ]; ]; printf("Input string:\n"); scanf_s("%s&quo ...

  2. java 生成二维码工具

    二维码生成 Gitee:https://gitee.com/search?utf8=%E2%9C%93&search=qrext4j&group_id=&project_id= ...

  3. spring tool suite (sts) 创建springmvc(没有实践)

    摘自:STS(Spring Tool Suite)建立默认的spring mvc项目 老外的原创,网址:http://www.codejava.NET/frameworks/spring/spring ...

  4. os操作文件

    os.makedirs('dirname1/dirname2') 可生成多层递归目录 os.removedirs('dirname1') 若目录为空,则删除,并递归到上一级目录,如若也为空,则删除,依 ...

  5. elasticsearch 中文 term & completion suggester

    Term suggester 创建索引 curl -XPUT 'http://172.16.125.136:9200/term?pretty'创建 mapping curl -XPOST http:/ ...

  6. 剑指Offer（书）：二进制中1的个数

    题目:输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 分析:下面这两种方法都可以,不过第二种更好一些. public int numberOf1(int n) { int count ...

  7. 数据结构实验7：实现二分查找、二叉排序（查找）树和AVL树

    实验7 学号:      姓名:     专业: 7.1实验目的 (1) 掌握顺序表的查找方法,尤其是二分查找方法. (2) 掌握二叉排序树的建立及查找. 查找是软件设计中的最常用的运算,查找所涉及到 ...

  8. Ubuntu 配置Apache虚拟目录

    http://blog.csdn.net/spring21st/article/details/6589300 Ubuntu 配置Apache虚拟目录 http://blog.csdn.net/spr ...

  9. zoj 2829 Beautiful Number

    Beautiful Number Time Limit: 2 Seconds      Memory Limit: 65536 KB Mike is very lucky, as he has two ...

  10. 75. Spring Boot 定制URL匹配规则【从零开始学Spring Boot】

    在之前有一篇文章说了,博客名称从原来的<从零开始学Spring Boot>更改为<Spring Boot常见异常汇总>,后来写了几篇文章之后发展,有些文章还是一些知识点,所以后 ...