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. 解决火狐中用JQUERY .removeAttr（）无法去除元素属性的方法

    //为元素添加只读属性 $("#test").attr("readonly","readonly") //去除元素的只读属性 $(" ...

  2. MySQL的left,substr,instr截取字符串函数使用实例

         原表:select * from pagereferrer;如下:  如何在这张表中,查询出按 URL分类的信息 ,例如:211.95.60.43:8080算一类信息,并按百分比显示.预期结 ...

  3. 安卓开发中SQLite的使用（附实例）

    在Android平台上系统内置了丰富的API来供开发人员操作SQLite,我们可以轻松的完成对数据的存取.下面以我自己创建的收入信息表(InAccount)为例,来学习SQLite的使用. 主要是四个 ...

  4. APUE 2 - 进程组（process group） 会话（session） job

    进程组(process group) 进程组顾名思义是指一个或多个进程的集合.他们通常与同一个job(可以从同一个终端接收信号)相关联.每个进程组拥有一个唯一的Process Group Id.可以使 ...

  5. python使用环境的设置

    virtualenv usage mkidr ~/pyenv cd ~/pyenv virtualenv pycaffe #it will setup a new python environtmen ...

  6. 基于轻量级ORM框架Dapper的扩展说明

    这里简单的介绍一下本人基于Dapper作的一些简单的扩展,供大家参考. 为何要使用这款框架,相信大家看到下面排名就清楚了 其实在各大网站上,我们大概都会看到这样的一个对比效果图,在超过500次poco ...

  7. jsp页面附件上传暂存的处理

    有没有遇到页面是新建一个新对象,对象里面需要上传附件,但是只有当对象保存时才将附件一同上传到数据库的情况? 这种情况的处理可以参考狐狸的思路: @jsp页面创建一个botton bn,该button的 ...

  8. 优先队列的二叉堆Java实现

    package practice; import edu.princeton.cs.algs4.StdRandom; public class TestMain { public static voi ...

  9. keepalive集群工作原理及应用

    author:JevonWei 版权声明:原创作品 集群工作原理 一.集群基础 1.系统的扩展方式 scale up向上扩展:提高单台服务器的性能 scale out向外扩展:多台服务器联合起来满足同 ...

  10. 【转载】makefile经典教程

    该篇文章为转载,是对原作者系列文章的总汇加上标注. 支持原创,请移步陈浩大神博客: http://blog.csdn.net/haoel/article/details/2886 makefile很重 ...