利用Ajax加载数据

Posted 23滴雨

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了利用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);

 

以上是关于利用Ajax加载数据的主要内容,如果未能解决你的问题,请参考以下文章

前端面试题之手写promise

html 输入类型提交通常在单击时重新加载页面。此片段使输入不重新加载页面以便进行ajax调用

利用Ajax加载数据

Javascript代码片段在drupal中不起作用

利用AJAX+PHP+MySQL实现不重新加载页面进行用户名已注册检测

jQuery高级Ajax