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. C/C++ 知识点---sizeof使用规则及陷阱分析(网摘)

    C/C++ 知识点---sizeof使用规则及陷阱分析 原文出处:[胖奇的专栏] 1.什么是sizeof 首先看一下sizeof在msdn上的定义:     The sizeof keyword gi ...

  2. python自动化运维三：数据报表定制以及scapy模块介绍

    p { margin-bottom: 0.25cm; line-height: 120% } a:link { } Excel也是报表的一个重要的工具.这里首先接受下excel的操作.先来看一个简单的 ...

  3. IOS中的属性列表----Property List

    属性列表,是一种用来存储串行化后的对象的文件.因为扩展名为plist ,因此通常被称为 plist文件. plist文件通常用于储存用户设置,也可以用于存储捆绑的信息,其内容为xml格式.它可以在程序 ...

  4. String、StringBuffer与StringBuilder

    String.StringBuffer与StringBuilder之间区别 最近学习到StringBuffer,心中有好些疑问,搜索了一些关于String,StringBuffer,StringBui ...

  5. S7-300之间的PROFIBUS-DP主从通信

    一.PROFIBUS-DP简介 1.由来 2..总线连接器 二.系统结构示例 三.组态过程示例 三,DP网络组态 1.新建一个项目和两个300站点如下 2.组态从站DP网络 1)点击常规中的属性 2) ...

  6. jsp基础与提高（EL、JSTL)

    EL表达式 1.1 为什么需要EL表达式和JSP标签 JSP的产生在一定程度上将Servlet中负责表现的功能抽取了出来,但JSP页内嵌入的Java代码也破坏了页面中负责表现的页面结构,特别是当运算逻 ...

  7. Myeclipse详细使用教程

    Myeclipse详细使用教程.. /*+Shift+Enter(生成多行注释) /**+Shift+Enter(生成文档注释)-----------------问题:在编辑jsp的时候,如果光标移动 ...

  8. python爬虫之有道翻译

    import urllib.request import urllib.parse import json class Translate():     def __init__(self):     ...

  9. adb 安装apk 报错：Failure [INSTALL_FAILED_INVALID_URI]

    今天在安装某apk的时候,发现报错 报错信息:Failure [INSTALL_FAILED_INVALID_URI] 于是找到了一个解决方式: cmd命令行下执行以下命令: 第一步.adb remo ...

  10. django模板（过滤器）

    -------------------django内建的过滤器-------------------1.add 使用形式为:{{ value | add: "2"}} 意义:将va ...