zoukankan      html  css  js  c++  java
  • 在Ajax中将数组转换成字符串(0517-am)

    一、如何在Ajax中将数组转换成字符串

    1. 主页面;

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ajax查表格</title>
    <script src="../jquery-1.11.2.min.js">
    </script>
    </head>
    
    <body>
    
    <div><input type="button" value="显示数据" id="bst"></div>
    <table id="xianshi" border="1" cellpadding="0" cellspacing="0" width="100%">
    
    </table>
    
    </body>
    <script type="text/javascript">
    $(document).ready(function(e) {
    	
        $("#bst").click(function(){
    		$.ajax({
    			url:"ChuLi.php",
    			dataType:"TEXT",
    			success: function(data){
    				
    				
    				var str="<tr><td>代号</td><td>姓名</td><td>性别</td><td>民族</td><td>生日</td></tr>";
    				 
    				var hang=data.split("|"); //拆分每一行的字符串,隔开行
    				for(var i=0;i<hang.length;i++)
    				{
    					var lie=hang[i].split("^"); 
    					
    					//输出方法一:
    					/*str+="<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+"</td><td>"+lie[4]+"</td></tr>"; //str+=  拼接字符串*/
    					
    					 //输出方法二:再套一个循环
    					 str+="<tr>";
    					 for(var j=0;j<lie.length;j++)
    					 {
    						 str+="<td>"+lie[j]+"</td>";
    						 }
    					 str+="</tr>";
    					 
    					 
    					$("#xianshi").html(str);
    					
    					} 
    				
    				}
    							
    			});
    	
    		})
    	
    });
    
    
    </script>
    </html>
    

      

    2. 处理页面:

    <?php
    include ("../DBDA.class.php");
    $db=new DBDA();
    $sql="select * from info";
    
    //方法一:普通方法直接写:
    //$attr=$db->Query($sql);//返回的是数组,要转换成字符串
    
    //因为要以表格返回的是字符串形式,所以需要拆分字符串
    //拆分成这样的形式: "p001^张三|p002^李四|p003^王五";
    
    /*$str="";
    foreach ($attr as $v)
    {
    	$str=$str.implode("^",$v); //将每列数据拼接成字符串
    	$str=$str."|";//拼接每行
    	}*/
    //sunstr:截取字符串,获取从字符串s中的第n个位置开始长度为len的字符串
    //$str=substr($str,0,strlen($str)-1);//这一步是为了去掉末尾的“|”符号
    //echo $str;
    
    
    
    //方法二:使用DBDA中封装的方法
    echo $db->StrQuery($sql);
    

      

    3. 运行结果显示:

    附1:将Ajax 中数组转换成字符串 封装成类

    //Ajax调用返回字符串
    	public function StrQuery($sql,$type=1,$db="mydb")
    	{
    		//造连接对象
    		$conn = new MySQLi($this->host,$this->uid,$this->password,$db);
    		
    		//判断连接是否成功
    		!mysqli_connect_error() or die("连接失败!");
    		
    		//执行SQL语句
    		$result = $conn->query($sql);
    		
    		//判断SQL语句类型
    		if($type==1)
    		{
    			$attr = $result->fetch_all();
    			$str = "";
    			//如果是查询语句返回字符串
    			for($i=0;$i<count($attr);$i++)
    			{
    				for($j=0;$j<count($attr[$i]);$j++)
    				{
    					$str = $str.$attr[$i][$j];
    					$str = $str."^";
    				}
    				$str = substr($str,0,strlen($str)-1);
    				$str = $str."|";
    			}
    			$str = substr($str,0,strlen($str)-1);
    			
    			return $str;
    		}
    		else
    		{
    			//如果是其他语句,返回true或false
    			if($result)
    			{
    				return "OK";
    			}
    			else
    			{
    				return "NO";
    			}
    		}
    	}
    

      

    附2:在统计函数(count)中,使用StrQuery($sql)比较方便,直接返回字符串

    <!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>
    </head>
    
    <body>
    <?php
    
    include("../DBDA.php");
    $db = new DBDA();
    
    $sql = "select count(*) from Users where Uid = 'lisi'";
    
    //$arr = $db->Query($sql);
    
    //echo $arr[0][0]; 
    
    $attr = $db->StrQuery($sql);
    
    echo $attr;
    
    ?>
    

      返回结果为1.

    二、对表格进行进一步操作,增加删除

    1.主页面

      1 <head>
      2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      3 <title>ajax查表格</title>
      4 <script src="../jquery-1.11.2.min.js">
      5 </script>
      6 <style>
      7 .sc
      8 {
      9     60px;
     10     height:25px;
     11     background-color:#09F;
     12     color:#FFF;
     13     text-align:center;
     14     line-height:25px;
     15     vertical-align:middle;
     16     
     17     }
     18 .sc:hover
     19 {    
     20     cursor:pointer;
     21     background-color:#FF6B24;
     22     }
     23 </style>
     24 </head>
     25 
     26 <body>
     27 
     28 <div><input type="button" value="显示数据" id="bst"></div><br />
     29 <table id="xianshi" border="1" cellpadding="0" cellspacing="0" width="100%">
     30 
     31 </table>
     32 
     33 </body>
     34 <script type="text/javascript">
     35 
     36     
     37     $("#bst").click(function(){
     38         
     39         ShowAll();
     40         BindCK();    
     41     })
     42     
     43     //点击删除
     44             function BindCK()
     45             {
     46                 
     47             $(".sc").click(function(){
     48                 //根据属性找到删除数据的主键值
     49                 var code=$(this).attr("bs");
     50                 $.ajax({
     51                     url:"Delete.php",
     52                     data:{code:code},
     53                     type:"POST",
     54                     dataType:"TEXT",
     55                     success: function(data){
     56                         //trim()去除空格
     57                         if(data.trim()=="OK")
     58                         {
     59                             //删除成功后显示删除后的表格信息(在不刷新页面的情况下)
     60                             ShowAll();
     61                             BindCK();
     62                         }
     63                         else
     64                         {
     65                             alert ("删除失败!");
     66                         }                        
     67                         }                    
     68                     });                
     69                 })
     70             }
     71             
     72             
     73     
     74     
     75     
     76         //显示数据表格
     77         function ShowAll(){
     78         
     79         $.ajax({
     80             async:false,
     81             url:"ChuLi.php",
     82             dataType:"TEXT",
     83             success: function(data){
     84                                 
     85                 var str="<tr><td>代号</td><td>姓名</td><td>性别</td><td>民族</td><td>生日</td><td>操作</td></tr>";
     86                  
     87                 var hang=data.split("|"); //拆分每一行的字符串,隔开行
     88                 for(var i=0;i<hang.length;i++)
     89                 {
     90                     var lie=hang[i].split("^"); 
     91                     
     92                      str+="<tr>";
     93                      for(var j=0;j<lie.length;j++)
     94                      {
     95                          str+="<td>"+lie[j]+"</td>";
     96                      }
     97                     //要删除数据要有对应的主键值,自定义属性“bs”,使其为主键值。可再设置div的样式
     98                      str+="<td><div class='sc' bs='"+lie[0]+"'>删除</div></td>";
     99                      str+="</tr>";
    100                                                              
    101                 } 
    102                     $("#xianshi").html(str);                
    103             }
    104                             
    105             }); 
    106         }
    107 </script>
    108 </html>
    View Code

    2.处理页面

     1 <?php
     2 $code=$_POST["code"];
     3 include ("../DBDA.class.php");
     4 $db=new DBDA();
     5 $sql="delete from Info where code='{$code}'";
     6 $r=$db->Query($sql,1);//1为增删改;0为查询
     7 if($r)
     8 {
     9     echo "OK";
    10     }
    11 else
    12 {
    13     echo "NO";
    14     }
    View Code

    3.显示 运行结果:

  • 相关阅读:
    如何使用Python创建可视化对象
    Power Query中如何解析累积总计
    如何快速复制度量值?
    如何使用文本字段进行条件格式设置
    Power BI 3-4月功能更新培训合集
    2019微软Power BI 每月功能更新系列——Power BI 4月版本功能完整解读
    送你一份堆积柱形图小点心,请收下~
    命令行编译带外部包依赖的java源文件 [以JDBC MySQL8为例]
    JavaScript (JS)常用方法
    JDK8过渡到JDK11
  • 原文地址:https://www.cnblogs.com/ds-3579/p/5502342.html
Copyright © 2011-2022 走看看