jQuery中AJAX || php获取数据库所有数据并在页面显示

最新推荐文章于 2023-11-27 10:59:49 发布

编程小飞侠

最新推荐文章于 2023-11-27 10:59:49 发布

阅读量1.2k

点赞数

分类专栏： ajax php

本文链接：https://blog.csdn.net/weixin_45703155/article/details/107468292

版权

php 同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

ajax

3 篇文章 0 订阅

订阅专栏

前端(ajax.html)要加载jQuery:

<html>
<head>
<meta charset="utf-8">
<title>ajax实例</title>
<form>
	 <input name="phone" autocomplete="off" type="text" placeholder="请输入手机号码"/>
	<input name="password" type="password" autocomplete="off" placeholder="请输入密码"/>
</form>
<script type="text/javascript" src="../jquery-3.4.1.min.js"></script>
<script type="text/javascript">

        $.ajax({        /*ajax代码*/
        
        		$data = $("form").serialize();	//获取表单数据,形式 $phone=11&$password=234
        		
                url:'test.php',         /*ajax发送到哪里(test.php)*/
                data:$data,				
                type:"post|get",		/*以post或者get方法
                dataType:"JSON",        /*服务器返回的数据的类型，默认text，其他json，xml，script，htm*/
                success:function(re){   /*对服务器返回数据进行处理*/
                        var name,url;
                        for(var k in re){       /*k为服务器返回的数据re的下标*/
                                name = re[k].username;  /*获取相应下标的name值*/
                                url = re[k].bm_URL;     /*获取相应下标的url值*/
                                $("#td").append("<tr><td>"+name+"</td><td>"+url+"</td></tr>")           //在table下增加行<tr>来显示数据*/
                        }
                }
        })
</script>

</head>
<body>
        <table id="td" border="1" >
                <tr>
                        <td>name</td>
                        <td>url</td>
                </tr>

        </table>

</body>
</html>

php(test.php):

<?php
        $pdo = new PDO('mysql:host=localhost;dbname=jsj18137','jsj18137','123456');     //初始化PDO对象
        $sql="select * from bookmark";
        $pdos=$pdo->query($sql); //进行搜索查询操作
        $arr=$pdos->fetchAll(PDO::FETCH_ASSOC);//获取结果集中所有剩余的行，整体以数组形式返回
        echo json_encode($arr);         //对变量进行 JSON 编码

?>

PHP 数据对象（PDO）扩展为PHP访问数据库定义了一个轻量级的一致接口。
mysql //数据库类型
localhost //数据库主机名
‘jsj18137’ //使用的数据库
‘jsj18137’ //数据库连接用户名
‘123456’ //用户对应的密码
PDO::FETCH_ASSOC：指定获取方式，将对应结果集中的每一行作为一个由列名索引的数组返回。如果结果集中包含多个名称相同的列，则PDO::FETCH_ASSOC每个列名只返回一个值。
$pdos->fetchAll（）获取结果集中所有剩余的行
json_encode（）对变量进行 JSON 编码

图：
在这里插入图片描述
2.thinkphp5.1获取ajax数据与返回：

ajax代码：

  $.ajax({

                url:"{:url('index/index/sendcode')}",
                data:data,
                dataType:'json',

                success:function(res){
                    if(res.code == 10002){
                        alert(res.msg);
                    }else{

                        if(res.code != 10000) {
                            alert("短信发送失败，请重新发送！");
                            //alert(res.code);
                            //alert(res.data);
                            return;
                        }else {
                            //alert(res.data);
                            alert("短信发送成功，请输入获取的验证码");
                        }

                    }
                }
            })

app目录index控制器index里面的sendcode方法代码：

   public function sendcode(Request $request)
    {
        $phone = $request->param("phone/s");//获取前端电话号码，并转化为字符串

        // 判断数据库中是否存在手机号
        $result = \app\index\model\User::where("phone",'=', $phone)->find();
        if(isset($result)){

            $res = [
                'code' => 10002,
                'msg' => "该手机号已注册"
            ];
            return json($res); //返回给前端ajax接收结果

        }else{

            $to = $phone; //电话号码
            $data = rand(1000,9999); //随机数验证码
            Session::set("ssCode",$data); //保存验证码，以便后续验证比较
            //$code = Session::get("ssCode"); //获取session变量验证码
            $time = "10"; //过期时间
            $tempId = 1; //模板id

            return ["to"=>$to,"data"=>$data,"code"=>$code]; //返回给前端ajax接收结果
        }
    }

编程小飞侠

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
jQuery中AJAX || php获取数据库所有数据并在页面显示

前端(ajax.html):<html><head><meta charset="utf-8"><title>ajax实例</title><script type="text/javascript" src="../jquery-3.4.1.min.js"></script><script type="text/javascript"> $.ajax({ /*ajax代
复制链接

扫一扫