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

()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 传值。

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">
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

时间： 2024-03-06 23:31:58

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

Linux中的两种link方式

Linux系统中包括两种链接方式:硬链接(hard link)和符号链接(symbolic link),其中符合链接就是所谓的软链接(soft link),那么两者之间到底有什么区别呢? inode 在Linux系统中,内核为每一个新创建的文件分配一个inode,每个文件都有一个惟一的inode,这里将inode简单理解成一个指针,它永远指向本文件的具体存储位置同时,文件属性保存在inode里,比如owner等.在访问文件时,inode被复制到内存,从而实现文件的快速访问.系统是通过inode来

Hibeernate中的两种分页方式

1. return getHibernateTemplate().executeFind(new HibernateCallback() { public Object doInHibernate(Session s) throws HibernateException { Criteria c = s.createCriteria(AskOnline.class); c.add(Restrictions.eq("boardid", new Long(bid))); c.setFirs

Spark两种提交方式Yarn-client and Yarn-cluster

Spark支持三种集群部署方式(Standalone,Mesos,Yarn),其中Master服务(Spark Standalone,Mesos Master,Yarn ResourceManager)决定哪些应用可以运行,在那个节点上运行,以及什么时候运行.Slave服务(Yarn NodeManager)运行在每个节点上,节点控制着Executor进程,同时监控作业的运行状态以及资源的消耗.Spark运行在Yarn上,有两种模式,Yarn-Client和Yarn-Cluster.通常情况下,

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

前言 上一节我们详细讲解了认证及其基本信息,这一节我们通过两种不同方式来实现认证,并且分析如何合理的利用这两种方式,文中涉及到的基础知识,请参看上一篇文中,就不再废叙述废话. 序言 对于所谓的认证说到底就是安全问题,在Web API中有多种方式来实现安全,[accepted]方式来处理基于IIS的安全(通过上节提到的WindowsIdentity依赖于HttpContext和IIS认证)或者在Web API里通过使用Web API中的消息处理机制,但是如果我们想应用程序运行在IIS之外此时Win

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

本文转自:http://www.cnblogs.com/CreateMyself/p/4857799.html 前言 上一节我们详细讲解了认证及其基本信息,这一节我们通过两种不同方式来实现认证,并且分析如何合理的利用这两种方式,文中涉及到的基础知识,请参看上一篇文中,就不再叙述废话. 序言 对于所谓的认证说到底就是安全问题,在Web API中有多种方式来实现安全,[accepted]方式来处理基于IIS的安全(通过上节提到的WindowsIdentity依赖于HttpContext和IIS认证)

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

本篇的思想:对HDFS获取的数据进行两种不同的可视化图表处理方式.第一种JFreeChar可视化处理生成图片文件查看.第二种AJAX+JSON+ECharts实现可视化图表,并呈现于浏览器上.   对此,给出代码示例,通过网络爬虫技术,将上传到HDFS的新浪网新闻信息实现热词统计功能,通过图表的柱状图来显示出来. ------> 目录: 1.JFreeChart可视化处理(生成本地图片) [1]HDFS文件读取 [2]JDFreeChart库应用 2.AJAX+JSON+EChart生成可视化图

【转】Android 开发之旅：view的几种布局方式及实践

引言 通过前面两篇: Android 开发之旅:又见Hello World! Android 开发之旅:深入分析布局文件&又是“Hello World!” 我们对Android应用程序运行原理及布局文件可谓有了比较深刻的认识和理解,并且用“Hello World!”程序来实践证明了.在继续深入Android开发之旅之前,有必要解决前两篇中没有介绍的遗留问题:View的几种布局显示方法,以后就不会在针对布局方面做过多的介绍.View的布局显示方式有下面几种:线性布局(Linear Layout).

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

本文的主要内容就是分别介绍以上视图的七种布局显示方式效果及实现,大纲如下: 1.View布局概述 2.线性布局(Linear Layout) 2.1.Tips:android:layout_weight="1" 3.相对布局(Relative Layout) 4.表格布局(Table Layout) 5.列表视图(List View) 5.1.一个小的改进 5.2.补充说明 6.网格视图(Grid View) 7 .绝对布局() 8.标签布局(Tab Layout) 1.view的布局

javascript中对象两种创建方式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> // 创建对象的两种方式: // 1 对象字面量 // 2 new Obj