欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

jQuery+Ajax+js请求json格式数据并渲染到html页面

程序员文章站 2024-01-26 22:02:40
...

##花了一天的时间终于搞清楚原因，原来目前的mysql的mysql_connect语句改成mysqli_connect，所以不能连接服务器，也就请求不到信息，以下附上改的代码，各位 不懂得可以留下提问，共勉

123.PHP代码
**

PHP运行需要环境，重要非常重要，对小白这是个巨坑，我这里是xampp的运行环境

**

<?php
    $dbhost = 'localhost:3306';  // mysql服务器主机地址
    $dbuser = 'root';            // mysql用户名
    $dbpass = '123456';          // mysql用户名密码
    $conn = mysqli_connect($dbhost, $dbuser, $dbpass);
    if(! $conn )
    {
        die('连接失败: ' . mysqli_error($conn));  //注意改成了mysqli_error($conn)
    }
    // 设置编码，防止中文乱码
    mysqli_query($conn , "set names utf8");
     
    $sql = 'SELECT id,resname,imgurl,resint,resurl,pageview FROM reslist';
     
    mysqli_select_db( $conn, 'list' );
    $retval = mysqli_query( $conn, $sql );
    if(! $retval )
    {
        die('无法读取数据: ' . mysqli_error($conn));
    }
     $results = array();
    //echo '<h2>菜鸟教程 mysqli_fetch_array 测试<h2>';
    //echo '<table border="1"><tr><td>教程 ID</td><td>标题</td><td>作者</td><td>提交日期</td><td>访问地址</td><td>访问量</td></tr>';
    while($row = mysqli_fetch_array($retval, MYSQLI_ASSOC))
    {
    // echo "<tr><td> {$row['id']}</td> ".
    //       "<td>{$row['resname']} </td> ".
    //       "<td>{$row['imgurl']} </td> ".
    //       "<td>{$row['resint']} </td> ".
    //       "<td>{$row['resurl']} </td> ".
    //       "<td>{$row['pageview']} </td> ".
    //       "</tr>";
         $results[] = $row;   
    }
    //echo '</table>';
    // 将数组转成json格式
    echo json_encode($results);
    
    // 关闭连接
    mysqli_free_result($retval);
    mysqli_close($conn);
    //echo $json;
    ?>

demo.html

<body>
		

	
<button class="btn btn-default" id="anniu" style="width: 100%;background: red;height: 50px;"></button>
<p class="text"></p>
<div class="wu"> //显示的地方
	
</div>
    
    <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>

		<script>
			$(function() {
				$('#anniu').click(function() {
					$.ajax({ //请求方式         
						type: "GET", //文件位置         
						url: "123.php", //返回数据格式为json,也可以是其他格式如    
						dataType: "json", //请求成功后要执行的函数，拼接html      
						success: function(data) {
							var str = "<ul>";
							$.each(data, function(i, n) {
								str += "<li>" + "ID：" + n.id + "</li>";
								str += "<li>" + "标题：" + n.resname + "</li>";
								str += "<li>" + "地址：" + n.imgurl + "</li>";
								str += "<li>" + "更新时间：" + n.resint + "</li>";
								str += "<li>" + "查看地址：" + n.resurl + "</li>";
								str += "<li>" + "阅读量：" + n.pageview + "</li>";
							});
							str += "</ul>";
							//console.log(str);  //可以先开启这个看看能不能请求到数据
							$(".wu").html(str);
						
						}
					})
				})
				
				$(document).ajaxStart(function(){ //Ajax请求时候给用户的提示
					$('.text').text('加载中').show();
				})
				$(document).ajaxStop(function(){//Ajax请求到数据的提示
					$('.text').text('加载中').hide();
				})

			});
		</script>

	</body>

到此结束，就可以在浏览器看到数据了

ID：1
标题：百度一下
地址：www.baidu.com
更新时间：商业推广 2018-10-10
查看地址：8yunhu,com
阅读量：93
ID：2
标题：电影资源
地址：www.3tbyaa.com
更新时间：影视资源 2018-10-10
查看地址：zj.qier.com
阅读量：100
ID：3
标题：滴滴优惠券
地址：www.3tbyaa.com
更新时间：限时活动 2018-10-10
查看地址：huya.com
阅读量：152

导入数据库sql语句

DROP TABLE IF EXISTS reslist;
CREATE TABLE reslist (
ID int(11) NOT NULL auto_increment,
resname varchar(20) NOT NULL,
imgurl varchar(50) NOT NULL,
resint varchar(50) NOT NULL,
resurl varchar(50) NOT NULL,
pageview varchar(20) NOT NULL,
PRIMARY KEY (ID)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;

INSERT INTO reslist VALUES (‘1’, ‘百度一下’, ‘www.baidu.com’, ‘商业推广 2018-10-10’, ‘8yunhu,com’, ‘93’);
INSERT INTO reslist VALUES (‘2’, ‘电影资源’, ‘www.3tbyaa.com’, ‘影视资源 2018-10-10’, ‘zj.qier.com’, ‘100’);
INSERT INTO reslist VALUES (‘3’, ‘滴滴优惠券’, ‘www.3tbyaa.com’, ‘限时活动 2018-10-10’, ‘huya.com’, ‘152’);

转载https://blog.csdn.net/weixin_39927850/article/details/79113006

上一篇： 全局方法，全局变量

下一篇： 第47课:综合练习

推荐阅读