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. python 线程之 threading(一)

    threading:基于对象和类的较高层面上的接口,threading模块在内部使用_thread模块来实现线程的对象以及常用的同步化工具的功能. 使用定制类的方式继承 threading.Threa ...

  2. Linux中cp覆盖不提示

    cp覆盖时,无论加什么参数-f之类的还是提示是否覆盖,这在大量cp覆盖操作的时候是不能忍受的. 1. 把a目录下的文件复制到b目录 cp –r a/* b 2. 执行上面的命令时,b存在的每个文件都会 ...

  3. How to: 执行Action当收到数据时

      本文旨在演示ActionBlock的使用. 大致流程: 输入路径--读取字节--计算--传输到打印   // Demonstrates how to provide delegates to ex ...

  4. BZOJ4584 : [Apio2016]赛艇

    首先将值域离散化成$O(n)$个连续段. 设$f[i][j][k]$表示第$i$个学校派出的数量在第$j$个连续段,在第$j$个连续段一共有$k$个学校的方案数.用组合数以及前缀和转移即可. 时间复杂 ...

  5. oracle中利用trigger,sequence自动生成ID

    http://zhanghong.iteye.com/blog/865937 1. 首先创建数据库表 SQL> create table customer( 2  id number(8) no ...

  6. ((ParameterizedType) getClass().getGenericSuperclass()).getActualTypeArguments()[0]的用法

    父类:public class BaseHibernateDaoSupport<T>{ private Class<T> entityClass; public BaseHib ...

  7. HDU 4753 Fishhead’s Little Game(DFS)

    题目链接 很繁琐的爆搜,最多要加2^12条边,暴力就可以,回溯那部分一直没有回溯好,写了一晚上...代码非常,非常难看..对了,还不是普通的爆搜,双向搜索博弈,以前记得看过,这次好像第一次写.. #i ...

  8. BZOJ2453维护队列&&BZOJ2120数颜色

    2016-05-28 11:20:22 共同的思路: 维护某种颜色上一次在哪里出现pre,可以知道当pre<询问的l时更新答案 块内按照pre排序 修改的时候重新O(n)扫一遍,如果和之前的不一 ...

  9. mysql的小总结

    1.什么是数据库 ? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,它产生于距今六十多年前,随着信息技术和市场的发展,特别是二十世纪九十年代以后,数据管理不再仅仅是存储和管理数 ...

  10. Node.js的高性能封装 Express.js

    Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用.Express 不对 node.js 已有的特性进行二次抽象,我们只是在它之上扩展了W ...