php+ajax+vue接口

最新推荐文章于 2021-04-02 09:50:39 发布

黑白子2000

最新推荐文章于 2021-04-02 09:50:39 发布

阅读量258

点赞数 1

分类专栏： php

本文链接：https://blog.csdn.net/weixin_45079974/article/details/111995094

版权

PHP Ajax 数据库交互 Vue.js 前端渲染

关键词由CSDN通过智能技术生成

php 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<?php
    $host='localhost';
    $user='shopping';
    $pass='000000';
    $dbname='shopping';
    $link=mysqli_connect($host,$user,$pass,$dbname);

    //这是根据订单号来查寻购物车的信息
    //$sql="select * from order_items where orderid=(select customerid from customers where name='lin')";
    $sql="select * from admin";
    //echo $sql;
    session_start();
    //echo $_SESSION['login'];
    if($_SESSION['login']=='yes'){
        $arr=array();
        $result=mysqli_query($link,$sql);
        // $que=mysqli_fetch_array($result,1);
        while($row=mysqli_fetch_assoc($result)){
            $arr[]=$row;
        }
        echo json_encode($arr);
    }
    
?>

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>这是购物车</title>
	<link rel="stylesheet" type="text/css" href="js/bootstrap.css" />
	<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		.table-bordered,
		.table>thead:first-child>tr:first-child>th {
			text-align: center;
		}

		thead {
			background-color: #f9f9f9;
		}

		thead th {
			border-bottom: none !important;
		}

		.table-striped>tbody>tr:nth-of-type(odd) {
			background-color: #FFFFFF;
		}

		.table-hover>tbody>tr:hover {
			background-color: #FFFFFF;
		}

		button {
			border: none;
			width: 20px;
		}

		button:active {
			color: #333;
			background-color: #e6e6e6;
			border-color: #adadad;
		}
	</style>
	
</head>

<body>
	<div id="app">
		<table class="table table-bordered table-hover table-striped">
			<thead>
				<!-- <th>订单编号</th>
				<th>书号</th>
				<th>价格</th>
				<th>数量</th>
				<th>总计</th> -->
				<th>账号</th>
				<th>密码</th>
			</thead>
			<tbody>
				<tr v-for="item in items">
					<td>{{item.username}}</td>
					<td>{{item.password}}</td>
					<!-- <td>{{item.orderid}}</td>
					<td>{{item.isbn}}</td>
					<td>{{item.item_price}}</td>
					<td>{{item.quantity}}</td>
					<td>{{item.item_price*item.quantity}}</td> -->
				</tr>
			</tbody>
		</table>
		
		<div class="panel panel-primary">
			<div class="panel-body form-inline" style="text-align: center;">
				<label>
					编号:
					<input type="text" class="form-control">
				</label>

				<label>
					名称:
					<input type="text" class="form-control">
				</label>

				<label>
					口味:
					<input type="text" class="form-control">
				</label>

				<label>
					价格:
					<input type="text" class="form-control">
				</label>

				<!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 -->
				<input type="button" value="添加" class="btn btn-primary">
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	const vm = new Vue({
			el: "#app",
			data: {
				items:[]
			},
			created: function () {
				var that = this;
				$.ajax({
					type: 'POST',
					url: 'shpcar.php',
					success: function (data) {
						var json = JSON.parse(data);
						that.items=json;
					},
				})	
			},
		})	
</script>
</html>

img标签的属性值获取ajax返回的值

<img :src=item.src alt="" width="100px" height="100px">

黑白子2000

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录