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. maven3自定义archetype

    maven使用起来还是很方便,但默认自带的archetype配置junit版本比较老.每次创建新项目都要手动修改junit版本,所以就想着能不能自己建一个新版本出来,省得每次手动修改的麻烦. 网上找了 ...

  2. 【转载】由浅入深分析mybatis通过动态代理实现拦截器（插件）的原理

    转自:http://zhangbo-peipei-163-com.iteye.com/blog/2033832?utm_source=tuicool&utm_medium=referral 我 ...

  3. Ubuntu 发行版的 Linux 操作系统

    Ubuntu 发行版的 Linux 操作系统.. ------------------------------------- ------------------------------------- ...

  4. 4_SSRF

    SSRF SSRF(服务请求伪造)是一种由攻击者构造形成由服务器端发起请求的一个安全漏洞,它将一个可以发起网络请求的服务当作跳板来攻击其他服务器,SSRF的攻击目标一般是内网.当服务器提供了从其他服务 ...

  5. 转每天一个linux命令（5）：rm 命令

    昨天学习了创建文件和目录的命令mkdir ,今天学习一下linux中删除文件和目录的命令: rm命令.rm是常用的命令,该命令的功能为删除一个目录中的一个或多个文件或目录,它也可以将某个目录及其下的所 ...

  6. python制作爬虫爬取京东商品评论教程

    作者:蓝鲸 类型:转载 本文是继前2篇Python爬虫系列文章的后续篇,给大家介绍的是如何使用Python爬取京东商品评论信息的方法,并根据数据绘制成各种统计图表,非常的细致,有需要的小伙伴可以参考下 ...

  7. ascii codec can't decode byte 0xe8 in position 0:ordinal not in range(128) python代码报错

    import sys reload(sys) sys.setdefaultencoding('utf-8')

  8. Jmeter之Bean shell学习(一)

    一.什么是Bean Shell BeanShell是一种完全符合Java语法规范的脚本语言,并且又拥有自己的一些语法和方法; BeanShell是一种松散类型的脚本语言(这点和JS类似); BeanS ...

  9. .net中html转pdf

    最近研究了2天如何把html转为pdf保存的方法,网上找了好多解决方案.总结下来也就是2种 一种是使用js的插件 jspdf  这款插件我试了下,很强大  使用起来也很简单,唯一 一点不好的就是转成p ...

  10. 探索 ConcurrentHashMap 高并发性的实现机制

    很不错的一篇文章,值得一看 http://www.ibm.com/developerworks/cn/java/java-lo-concurrenthashmap/