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. noip普及组2007 守望者的逃离

    守望者的逃离 描述 恶魔猎手尤迪安野心勃勃,他背叛了暗夜精灵,率领深藏在海底的娜迦族企图叛变.守望者在与尤迪安的交锋中遭遇了围杀,被困在一个荒芜的大岛上.为了杀死守望者,尤迪安开始对这个荒岛施咒,这座 ...

  2. mysql为什么范围查询(>,<,between,%like,like%)之后的索引无效

    因为使用了范围索引,所以会使用满足范围的所有的值,也就是说存储引擎在这个时候会提取出满足之后条件的所有值,并遍历获取满足之后条件的值. http://www.itpub.net/thread-1901 ...

  3. destoon源码分析一

    #0x01 先记录一些之前模糊的小知识点,补充一下 set_magic_quotes_runtime() -- 设置magic_quotes_runtime配置激活状态(php 5.3 被弃用,php ...

  4. 将execl里的数据批量导入数据库

    本文将采用NPOI插件来读取execl文件里的数据,将数据加载到内存中的DataTable中 /// <summary> /// 将Excel转换为DataTable /// </s ...

  5. 2017多校第10场 HDU 6181 Two Paths 次短路

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6181 题意:给一个图,求出次短路. 解法:我之前的模板不能解决这种图,就是最短路和次短路相等的情况,证 ...

  6. IT类非开发面试总结--2

    面试总结.. ================================= 第一部分..(自己对公司的最低要求) 面试需要提前准备的是:<想好自己以后要干嘛--我在想我以后要干嘛> ...

  7. Extjs6获取Grid里的数据(数据源)

    { xtype: 'grid', sortableColumns: false, reference: 'grid', flex: 1, store: 'panoram.Panoram', colum ...

  8. Unresolved reference issue in PyCharm

    Add src as a source content root: Then make sure to add add sources to your PYTHONPATH: Now imports ...

  9. webpack教程(六)——分离组件代码

    先来运行一下webpack命令, 看到app.js才4k. 安装一下react npm install react --sava-dev 在app/index.js文件内引入react 运行webpa ...

  10. 利用JavaScript来切换样式表

    切换样式表 html页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...