1、使用Ajax跳转处理页面连接数据库，完成下拉列表
首页：
<body>
<select id="sel">    </select>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
    $.ajax({
        url:"chuli.php", //处理页面
        data:{}, //要提交的值
        type:"POST", //提交方式
        dataType:"TEXT", //返回类型
        success:function(s){ //回调函数
            var hang = s.split("|");
            var str = "";
            for(var i=0;i<hang.length;i++)            {
                var lie = hang[i].split("^");
                str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
            }
            $("#sel").html(str);
            }
        });
});
</script>
处理页：
<?php
include("../DBDA.php");
$db = new DBDA();
$sql = "select * from Nation";
$attr = $db->Query($sql);
$str = "";
foreach($attr as $v){
    $str = $str.implode("^",$v);
    $str = $str."|";
}
$str = substr($str,0,strlen($str)-1);
echo $str;                                                        //通过字符串操作返回字符串
 
2、测试用户名是否可用
首页：
<body>
<div>用户名：<input type="text" id="uid" /><span id="xx"></span></div>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
    $("#uid").blur(function(){
        var uid = $(this).val();
        //调AJAX
        $.ajax({
            url:"uidchuli.php",
            data:{u:uid},
            type:"POST",
            dataType:"TEXT",
            success: function(data){
                    if(data.trim() == "OK"){            //去空格
                        var str = "该用户名可以使用";
                        $("#xx").html(str);
                        $("#xx").css("color","green");
                    }  else {
                        var str = "该用户名已存在！";
                        $("#xx").html(str);
                        $("#xx").css("color","red");
                    }
                }
            });
        })
});
</script>
处理页：
<?php
$uid = $_POST["u"];
include("../DBDA.php");
$db = new DBDA();
$sql = "select count(*) from Users where Uid='{$uid}'";
$attr = $db->Query($sql);
if($attr[0][0]>0){
    echo "NO";
}else{
    echo "OK";
}
 
3、返回值为Json的操作
首页：
<body>
<br />
<div>请输入代号：<input type="text" id="code" />
<input type="button" value="查询" id="btn" />
</div>
<br />
<div id="name"></div>
<br />
<br />
 
<div>请选择：<select id="sel">
<option value="p001">张三</option>
<option value="p002">李四</option>
<option value="p003">王五</option>
</select></div>
<br />
<div id="xinxi"></div>
 
</body>
<script type="text/javascript">
$(document).ready(function(e) {
    $("#btn").click(function(){
        var code = $("#code").val();
        $.ajax({
            url:"selchuli.php",
            data:{code:code},
            type:"POST",
            dataType:"JSON",
            success: function(data){
                    $("#name").text(data.name);
                }
            });
        })
 
 
    $("#sel").change(function(){
        var code = $(this).val();
        $.ajax({
            url:"xxchuli.php",
            data:{code:code},
            type:"POST",
            dataType:"JSON",
            success: function(data){
                    var str = "<span>代号："+data[0]+"姓名："+data[1]+"性别："+data[2]+"生日："+data[4]+"</span>";
                    $("#xinxi").html(str);
                }        
            });
        })    
});
</script>
 
selchuli.php处理页：
<?php
$code = $_POST["code"];
include("../DBDA.php");
$db = new DBDA();
$sql = "select Name from Info where Code = '{$code}'";
$attr = $db->Query($sql);
//做一个关联数组
$arr = array();
$arr["name"] = $attr[0][0];
//将数组转换为JSON
echo json_encode($arr);
 
xxchuli.php处理页：
<?php
$code = $_POST["code"];
include("../DBDA.php");
$db = new DBDA();
$sql = "select * from Info where Code = '{$code}'";
$attr = $db->Query($sql);
echo json_encode($attr[0]);                //如果是二维数组，在主页面可以使用for(var at in data)循环

Ajax练习题的更多相关文章

  1. 4-2 Ajax练习题，12结算！Check Out。

    练习题:在购物车的每个商品旁添加按钮,按一下减一个,数量为0删除该商品.先用普通方法再用Ajax支持. 1.自定义方法decrease, 为其设定路径routes.rb. 在resouurces :l ...

  2. 学习笔记：IDEA、原生ajax的三道练习题、Markdown

    前言 该从何说起呢?想写博客好久了,正好这个学期课很少(大三),可以静下心来写点东西(虽然事情依旧很多),总感觉记录和分享是一件很酷的事情.第一篇博客,第一次使用Markdown写博客,第一次使用ID ...

  3. Ajax和json一道基本的练习题

    关于ajax是javaEE中最基本的操作: 下面是这道题: 基本功能: jsp+servlet+ajax实现用户信息查询,实现无刷新删除 用户信息包括 学号 姓名 出生日期 性别 操作 2017010 ...

  4. js-day06-jQuery事件和DOM操作-练习题

    jQuery事件绑定 js中绑定事件,三种方式: 方式1: 直接在元素上,增加onXxx事件属性. <button onclick="alert(1);">点我< ...

  5. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  6. jQuery与ajax的应用（一）

    <body> <div id="resText"></div> <div id="reshtml"></d ...

  7. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  8. Ajax及跨域

    概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...

  9. 一个粗心的Bug，JSON格式不规范导致AJAX错误

    一.事件回放  今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...

随机推荐

  1. 开源一款iOS中国地图行政区控件（含一级与二级行政区）

    开源一款iOS版中国省市级地图行政区的控件,该组件可以支持拖动.缩放以及全国省和市级行政区的点选,主要适用于iPad,如果要在iPhone上使用,一些细节可能得做相关调整. 该地图组件实现起来不难,数 ...

  2. 一个想法照进现实-《IT连》创业项目：聊聊最近两三事

    今天打算写一篇断流水式的作文,哈,不按常规的写格式文了. 话说创业到现在,也快近半年了,时间那是飘的一个字:快! 从设想的很多很远,到被人不断告知要单点突破:从美好的远景,到现实艰难的执行:创业更像是 ...

  3. MarkDown---超强文本编辑器

    What you see Is What you  get ... --------------------------- Salmon 编辑器界面: ------------------------ ...

  4. Windows权限提升基础知识和命令

    介绍 这篇文章是介绍window的权限提升,虽然不是一个全面的指南,但会试图覆盖主要的技术,常用的资源列表在文章底部,可供大家参考. window权限提升基础知识 初始信息收集 在开始提权之前,我们需 ...

  5. JavaScript+html5 canvas实现本地截图教程

    这篇文章主要介绍了JavaScript+html5 canvas实现本地截图教程,对截图功能感兴趣的小伙伴们可以参考一下 最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canva ...

  6. 两个大数相乘-Java

    两个字符串表示两个非常大的数,请设计算法计算这两个大数的乘积,结果用字符串表示.例如S1="7832974972840919321747983209327",S2="19 ...

  7. Linux平台 Oracle 12cR2 RAC安装Part1：准备工作

    Linux平台 Oracle 12cR2 RAC安装Part1:准备工作 一.实施前期准备工作 1.1 服务器安装操作系统 1.2 Oracle安装介质 1.3 共享存储规划 1.4 网络规范分配 二 ...

  8. Linux io Model

    socket阻塞与非阻塞,同步与异步 作者:huangguisu 1. 概念理解 在进行网络编程时,我们常常见到同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调 ...

  9. 【ASP.NET MVC】View与Controller之间传递数据

    1   概述 本篇文章主要从操作上简要分析Controller<=>View之间相互传值,关于页面之间传值,如果感兴趣,可参考我另外一篇文章ASP.NET 页面之间传值的几种方式 . Co ...

  10. Calico 的网络结构是什么？- 每天5分钟玩转 Docker 容器技术（68）

    上一节我们部署了 Calico 网络,今天将运行容器并分析 Calico 的网络结构. 在 host1 中运行容器 bbox1 并连接到 cal_net1: docker container run ...