利用Ajax加载数据

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>加载数据</title>
<script src="bootstrap/js/jquery-1.11.2.min.js"></script>
</head>

<body>
<h1>加载数据</h1>

<select id="nation">
</select>

</body>
<script type="text/javascript">
//一般把这段代码写在网页最下面,但是加上这句话可将该段写在网页中任意位置
$(document).ready(function(e) {    //ready表示当页面加载完成后
    $.ajax({
        url:"sel.php",
        dataType:"TEXT",
        success: function(data){
            var hang = data.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>";
            }
            $("#nation").html(str);
        }
    });

});
</script>
</html>

  其处理页面为:

<?php
require_once "DBDA.class.php";
$db = new DBDA();
$sql = "select * from minzu";
$arr = $db->query($sql);
//将数据转化成字符串
$str = "";
foreach($arr as $v){
    $str = $str.implode("^",$v)."|";
    }
$str = substr($str,0,strlen($str)-1);
echo $str;

  或可在DBDA中扩展一个方法,使其直接返回一个字符串:

//返回字符串的方法
    public function strquery($sql,$type=0){
            $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
            $result = $db->query($sql);
            if($type){
                return $result;
            }else{
                $arr = $result->fetch_all();
                $str = "";
                foreach($arr as $v){
                    $str = $str.implode("^",$v)."|";
                    }
                $str = substr($str,0,strlen($str)-1);
                return $str;
        }
    }

 这样处理页面只需直接调用即可:

<?php
require_once "DBDA.class.php";
$db = new DBDA();
$sql = "select * from minzu";
echo $db->strquery($sql);

原文地址:https://www.cnblogs.com/maoqiaoyu123/p/8371348.html

时间: 2024-08-02 07:07:45

利用Ajax加载数据的相关文章

滑轮滚动到页面底部ajax加载数据

滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧 当然本例子采用的是jquery库,后期会做成原生js.本例的数据调用的是锋利的jquery一书提供的一段json. 首先要先判断页面怎么样才是滚动到底部,也就是scrollTop+window的height是否大于document的height,jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).height(): 再给windo

ExtJS学习笔记2:响应事件、使用AJAX加载数据

响应事件: 1.设置一个html标记 <div id="my-div">Ext JS 4 Cookbook</div> 2.使用get函数获取此标记对象 var el = Ext.get('my-div'); 3.将响应函数和对象的事件绑定 el.on('click', function(e, target, options){ alert('The Element was clicked!'); alert(this.id); }, this); 4.一次也可

js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面

js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了,导致出错.后来使用此法,保证了任何时候都完全是按照js的先后顺序执行的. 源码: /** * js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 * 原理:利用 ajax 异步多线程快速加载, 每个文件加载完成后存入到加载完成数组中, * 显示到页面时完全按传入的顺

Ajax 加载数据 练习

查询表的显示,查询显示如果不嵌入PHP代码的话,用ajax怎么实现?   <h1>显示数据</h1> <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td>代号</td> <td>姓名</td> <td>性别</td>

Ajax加载数据的使用

需求就是不能再进入页面时加载数据,只能在点击其中一个按钮时把数据加载呈现出来.具体效果如最下面的图. 1.前台页面 1 <h1 class="title" id="001" name="001" onclick="GetData(1)"> 2 概述 <span class="title_icon"></h1> 3 <div class="mc_list&q

分页插件,屏幕滚动ajax加载数据渲染页面

<link rel="stylesheet" href="yunsuifang/pc-patients/css/dropload.css" />    <style>       .opacity {            webkit-animation: opacity 0.3s linear;            animation: opacity 0.3s linear;        } @-webkit-keyframes o

select2 ajax加载数据,支持模糊查询(非本地)

$('#select_yx').select2({ placeholder: "----请选择院系----", width: "183px", allowClear: true, language: { noResults: function (params) { return "暂无数据"; } }, minimumResultsForSearch: -1, ajax: { url: apiaddress + '/Institute/GetIn

前台ajax加载数据

<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> <script src="~/Scripts/jquerytemplate.js"></script> function sendPostRequest(targetUrl, parameters, successCallback, errorCallback) { $.ajax({ typ

HTML5 实现触摸加载数据

var startX;                     //触摸起始横坐标var startY;                    //触摸起始纵坐标var moveSpave;                //移动的距离var isMoveX = true;          //判断是否为左右移动var isFirst = true;          //是否要判断touchmove方向var beginTime=0; //监听 触摸事件    document.queryS