Ajax的POST实例，index.html

<html>

<head>

<script type="text/javascript">

function showCustomer(str){

    var userName = str;

    var postStr   = "user_name="+ str;

    var xmlhttp;

    if (str==""){

        document.getElementById("txtHint").innerHTML="";

        return;

    }

    if (window.XMLHttpRequest){

        // code for IE7+, Firefox, Chrome, Opera, Safari

        xmlhttp=new XMLHttpRequest();

    } else {

        // code for IE6, IE5

        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    }

    xmlhttp.onreadystatechange=function(){

        if (xmlhttp.readyState==4 && xmlhttp.status==200){

            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

        }

    }

    xmlhttp.open("POST","getcustomer.php",true);

    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    xmlhttp.send(postStr);

}

</script>

</head>

<body>

<form action="" style="margin-top:15px;">

<label>请选择一位客户：

<select name="customers" onchange="showCustomer(this.value)" >

<option value="APPLE">Apple Computer, Inc.</option>

<option value="BAIDU ">BAIDU, Inc</option>

<option value="Canon">Canon USA, Inc.</option>

<option value="Google">Google, Inc.</option>

<option value="Nokia">Nokia Corporation</option>

<option value="SONY">Sony Corporation of America</option>

</select>

</label>

</form>

<br />

<div id="txtHint">客户信息将在此处列出 ...</div>

</body>

</html>

getcustomer.php

<?php

print_r($_POST);

?>

============================================================

下面的实例是GET。index.html

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Ajax Get 传值</title>

</head>

<script language="javascript">

function saveUserInfo()

{

    //获取接受返回信息层

    var msg = document.getElementById("msg");

    //获取表单对象和用户信息值

    var f = document.user_info;

    var userName  = f.user_name.value;

    var userAge   = f.user_age.value;

    var userSex   = f.user_sex.value;

    //接收表单的URL地址

    var url = "ajax_output2.php? user_name="+ userName +"&user_age="+ userAge +"&user_sex="+ userSex;

    //实例化Ajax

    //var ajax = InitAjax();

    var ajax = false;

    //开始初始化XMLHttpRequest对象

    if(window.XMLHttpRequest)

    {

        //Mozilla 浏览器

        ajax = new XMLHttpRequest();

        if (ajax.overrideMimeType)

        {//设置MiME类别

            ajax.overrideMimeType("text/xml");

        }

    }

    else if (window.ActiveXObject)

    {     // IE浏览器

        try

        {

            ajax = new ActiveXObject("Msxml2.XMLHTTP");

        }

        catch (e)

        {

            try

            {

                ajax = new ActiveXObject("Microsoft.XMLHTTP");

            } catch (e) {}

        }

    }

    if (!ajax)

    {

        // 异常，创建对象实例失败

        window.alert("不能创建XMLHttpRequest对象实例.");

        return false;

    }               

    //通过Post方式打开连接

    ajax.open("GET", url, true);

    //发送GET数据,已经在URL中赋了值所以send那里只要加个空参.

    ajax.send(null);

    //获取执行状态

    ajax.onreadystatechange = function()

    {

           //如果执行状态成功，那么就把返回信息写到指定的层里

           if (ajax.readyState == 4 && ajax.status == 200)

        {

            msg.innerHTML = ajax.responseText;

           }

    }

}

</script>

<body>

<div id="msg"></div>

<form name="user_info" method="post" action="">

<input type="text" name="user_name" style="display:none;" />

<input type="text" name="user_age" style="display:none;" />

<input type="text" name="user_sex" style="display:none;" />

<input type="button" value="获取服务器变量" onClick="saveUserInfo()">

</form>

</body>

ajax_output2.php

<?php

print_r($_GET);

?>

Ajax Post 与 Get 实例的更多相关文章

  1. 后台接受ajax传递值的实例代码

    后台接受ajax传递值的实例代码: 使用ajax可以实现无刷新数据交互,下面是一段后台代码接收ajax传递值的实例代码供需要的朋友参考,希望能够带来帮助. ajax代码如下: $(function ( ...

  2. Day21 Django之Form文件上传、原生Ajax和实现抽屉实例

    一.Form文件上传 """ Django settings for prev_chouti project. Generated by 'django-admin st ...

  3. PHP、jQuery、AJAX和MySQL 数据库实例

    index.html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  4. jQuery ajax上传文件实例

    jQuery ajax上传文件实例 <form id="form" enctype="multipart/form-data"><input ...

  5. ASP.NET使用jQuery AJAX实现MD5加密实例

    一个asp.net ajax例子,使用jquery,实现md5加密.在.NET 4.0,Visual Studio 2010上成功运行. 效果体验:http://tool.keleyi.com/t/m ...

  6. Ajax应用-Ajax传输JSON数据实例

    ———————————————————— <script type="text/javascript">            var client;          ...

  7. Datatables插件1.10.15版本服务器处理模式ajax获取分页数据实例解析

    一.问题描述 前端需要使用表格来展示数据,找了一些插件,最后确定使用dataTables组件来做. 后端的分页接口已经写好了,不能修改.接口需要传入页码(pageNumber)和页面显示数据条数(pa ...

  8. 详解AJAX工作原理以及实例讲解（通俗易懂）

    什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...

  9. SpringMVC+ajax文件上传实例教程

    原文地址:https://blog.csdn.net/weixin_41092717/article/details/81080152 文件上传文件上传是项目开发中最常见的功能.为了能上传文件,必须将 ...

随机推荐

  1. CentOS VMware 配置IP小结 静态 配置 桥接 NAT

    系统启动后可先ping下外网或局域网内其它机器. 如果配置虚拟机时选择的NAT上网方式,后面需要配置固定IP,请先参见VMware NAT方式下设置静态IP获得可用的IP范围和网关等信息. 先将ifc ...

  2. 程序员必备的代码审查（Code Review）清单【转载】

    在我们关于高效代码审查的博文中,我们建议使用一个检查清单.在代码审查中,检查清单是一个非常好的工具——它们保证了审查可以在你的团队中始终如一的进行.它们也是一种保证常见问题能够被发现并被解决的便利方式 ...

  3. Java命令行输入求和的简单学习

    思想:命令行输入的参数,必须先转换为数字才能进行加法计算,这就需要引用java.util.Scanner; 流程框图: 源代码: //实现几个整数相加的程序 //高开拓,2015.9.26 packa ...

  4. HBase Shell 常见操作

    1.一般操作 status 查看状态 version 查看HBase版本 2.DDL操作 create 'member','member_id','address','info' 创建了一个membe ...

  5. 疯狂java学习笔记之面向对象(五) - 封装、继承、多态

    一.封装: 封装的概念: - 合理的隐藏:隐藏不想被外界操作的Field.方法.构造器 - 合理的暴露:一般就是希望给别人调用的方法 e.g:显示器(按键暴露出来操作,但实际的东西/细节方法被隐藏起来 ...

  6. 【SAP Business Objects】Universe中的@prompt语法

    @Prompt 函数的语法: @Prompt('message','type',[lov],Mono|Multi,free|constrained|primary_key,persistent|not ...

  7. POJ 1681 (开关问题+高斯消元法)

    题目链接: http://poj.org/problem?id=1681 题目大意:一堆格子,或白或黄.每次可以把一个改变一个格子颜色,其上下左右四个格子颜色也改变.问最后使格子全部变黄,最少需要改变 ...

  8. [深入浅出WP8.1(Runtime)]Socket编程之UDP协议

    13.3 Socket编程之UDP协议 UDP协议和TCP协议都是Socket编程的协议,但是与TCP协议不同,UDP协议并不提供超时重传,出错重传等功能,也就是说其是不可靠的协议.UDP适用于一次只 ...

  9. [深入浅出WP8.1(Runtime)]文本块（TextBlock）

    4.3 文本块(TextBlock) 文本块(TextBlock)控件是用于显示少量文本的轻量控件,可以通过TextBlock呈现只读的文本,你可以把TextBlock控件理解为一种纯文本的展示控件. ...

  10. sublime text 3 的在文件夹中查找的快捷键没有反应 的bug冲突

    11:19 2015/11/18 sublime text 3 的在文件夹中查找的快捷键没有反应 的bug冲突 在文件夹查找的快捷键:ctrl shift f没有反应,后来发现是百度输入法与它有问题, ...