()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. mysql 报错Authentication method 'caching_sha2_password' is not supported

    原文地址:https://blog.csdn.net/u011583336/article/details/80999043 之前工作中用的数据库多是ms sqlserver,偶尔用到mysql都是运 ...

  2. 学习vue之windows下安装live-server 超级详细篇

    最近项目要求用vue2.0所以开始着手学习. 前期准备: 下载Node.js 地址:http://nodejs.cn/download/ 选择自己对应的版本,我下载的是.msi 64位的 然后就双击下 ...

  3. 大数据学习——有两个海量日志文件存储在hdfs

    有两个海量日志文件存储在hdfs上, 其中登陆日志格式:user,ip,time,oper(枚举值:1为上线,2为下线):访问之日格式为:ip,time,url,假设登陆日志中上下线信息完整,切同一上 ...

  4. 图的最小生成树——Prim算法

    Prim算法 Prim算法求最小生成树是采取蓝白点的思想,白点代表已经加入最小生成树的点,蓝点表示未加入最小生成树的点. 进行n次循环,每次循环把一个蓝点变为白点,该蓝点应该是与白点相连的最小边权的是 ...

  5. poj 1163 数塔

    #include<stdio.h> #include<string.h> #define N 110 int dp[N][N]; int a[N][N]; int Max(in ...

  6. 在后台根据单据标识构建单据的DynamicObject，然后调用BOS的保存服务保存单据。

    var bussnessInfo = Kingdee.BOS.ServiceHelper.MetaDataServiceHelper.GetFormMetaData(this.Context, &qu ...

  7. j_spring_security_check 404错误

    折腾了好久,还是写一篇备忘 折腾了好久,还是写一篇备忘 首先检查路径 <form class="form-signin" method="POST" ac ...

  8. Asp.Net Thread is being Aborted

    Asp.Net做的一个程序,通过JQuery的Ajax调用,程序执行的数据时间比较长,程序部署到服务器后执行一段时间后就弹出执行失败的对话框,日志记录的错误信息是“正在中止线程”. 查错过程: 1.根 ...

  9. virtualBox下Centos系统扩展磁盘空间

    (1)查看空间容量: 打开windows命令终端.然后打开virtualbox安装目录,找到VBoxManage.exe,拖动到终端里面.输入命令:list hdds,回车. 我安装的位置是 : C: ...

  10. oc温习三：常用函数

    参考文章: 算术函数 [算术函数] 函数名 说明 int rand() 随机数生成.(例)srand(time(nil)); //随机数初期化int val = rand()P; //0-49之间的随 ...