ajax基础及简单实例（仅学习）
时间：2023-05-24 08:00:02 | 来源：网站运营
时间：2023-05-24 08:00:02 来源：网站运营
ajax基础及简单实例（仅学习）：ajax（ asynchronous JavaScript xml ，异步JS和xml）技术是通过在后台与服务器进行少量数据交换，使网页实现异步更新。这样就可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
先来看个简单的例子，就是当我们在注册时，如果用户名已存在，我们如何通过ajax技术来进行数据的处理
复制代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="
http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <script src="../jquery-1.11.2.min.js"></script>
7 </head>
8
9 <body>
10
11 <input type="text" id="uid" /><span id="ts"></span>
12
13 </body>
14 <script type="text/javascript">
15
16 $("#uid").blur(function(){
17 //取出用户名
18 var uid = $(this).val();
19
20 //去数据库进行匹配
21 $.ajax({
22 url:"chuli.php", //处理页面的路径
23 data:{u:uid}, //要提交的数据是一个JSON
24 type:"POST", //提交方式
25 dataType:"TEXT", //返回数据的类型
26 //TEXT字符串 JSON返回JSON XML返回XML
27 success:function(data){ //回调函数 ,成功时返回的数据存在形参data里
28 if(data.trim()=="OK") //trim()方法会去掉页面中的冗余空格
29 {
30 $("#ts").html("该用户名可用");
31 $("#ts").css("color","green");
32 }
33 else
34 {
35 $("#ts").html("该用户名不可用");
36 $("#ts").css("color","red");
37 }
38 }
39 });
40 })
41
42 </script>
43 </html>
复制代码
下面是ajax发生数据到相应php处理页面
复制代码
1 <?php
2 $uid = $_POST["u"]; //通过ajax发送的data：json的key数据来接收相应的value
3 require "DataBse.class.php";
4 $db = new DataBase();
5
6 $sql = "select count(*) from users where uid='{$uid}'";
7
8 $arr = $db->query($sql);
9
10 if($arr[0][0])
11 {
12 echo "NO"; //处理页面的所有输出内容都将返回给success里面的回调data
13 }
14 else
15 {
16 echo "OK";
17 }
复制代码
看看效果
登陆的逻辑和做法和注册类似。
2.利用ajax完成调用数据页面的加载
以前了解的方法就是在页面中嵌入php代码去调数据，然后刷新页面完成加载，这里我们说下如何用ajax完成数据加载（感觉比嵌入php要繁琐一些，因为还没接触数据库内容转成son数据传输） 先来看看吧
第一个例子 加载个基础select下拉选择
复制代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="
http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <script src="../jquery-1.11.2.min.js"></script>
7 </head>
8
9 <body>
10 <h1>显示数据</h1>
11
12 <select id="sel"> //先写个下拉的外标签 ，内容先空着，等着加载过来数据
13
14 </select>
15
16 </body>
17 <script type="text/javascript">
18 $(document).ready(function(e) { //页面加载完开始执行
19
20
21 $.ajax({ //调用ajax方法
22 async:false, //async表示异步，有两个值，false表示同步（页面加载顺序是一步步来的，下面的内容加载要等ajax执行结束才开始），true表示同步（加载过程不影响ajax下面的数据继续执行）
23 url:"chuli.php",
24 dataType:"TEXT",
25 success: function(data){
26 var hang = data.split("|"); //将返回的数据调用split方法进行拆分，返回的hang数组就是每一行的数据
27 var str = ""; //定义一个空字符串，来存最后数据
28 for(var i=0;i<hang.length;i++) //将每行的数据循环遍历，
29 {
30 var lie = hang[i].split("^"); //行的每个数据就代表列，然后调用split方法继续将列数据拆开
31 str = str +"<option value='"+lie[0]+"'>"+lie[1]+"</option>"; //定义所有的数据都放在option标签里，然后存入str
32 }
33 $("#sel").html(str); //将str内容放入下拉列表中
34
35 }
36 });
37
38
39 });
40 </script>
41 </html>
复制代码
看一下处理页面，不看处理页面可能看不懂返回数据的处理
复制代码
1 <?php
2 require "DataBase.class.php";
3 $db = new DataBase();
4
5 $sql = "select * from login";
6
7 //var_dump($arr);
8
9 $arr=$db->query($sql);
10
11 $str="";
12 foreach ($arr as $v){
13 $str.=implode("^",$v)."|"; //将每个$v之间用 |分开 然后$v里面的每个数据中间用^分开
14
15
16 }
17 $str=substr($str,0,strlen($str)-1); //最后末尾会多余一个|,用字符串截取一下，去掉最后一个
18 echo $str;
在线咨询
