[php] ajax交互实现选择用户名显示用户数据

最新推荐文章于 2021-03-28 11:05:02 发布

天空还下着雪

最新推荐文章于 2021-03-28 11:05:02 发布

阅读量792

点赞数 1

分类专栏：后端文章标签： ajax

本文链接：https://blog.csdn.net/u010081689/article/details/49122783

版权

后端专栏收录该内容

86 篇文章 0 订阅

订阅专栏

写这篇文章有点厚无耻了，因为这是从学习网站上扒下来的，不过我也不在乎了，，就当写给自己看的。。高手路过就行了。如果有看不惯的，可以去www.runoob.com或www.w3school.com.cn 去看下php与ajax的交互

再次声明一下，此篇功能主要是通过ajax异步动态响应数据

数据表：

对应的sql语句（给了这个再测试的话就更方便了）：

--
-- 表的结构 `user`
--

CREATE TABLE IF NOT EXISTS `user` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `FirstName` varchar(24) NOT NULL,
  `LastName` varchar(24) NOT NULL,
  `Age` int(11) NOT NULL,
  `Hometown` varchar(100) NOT NULL,
  `Job` varchar(120) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;

--
-- 转存表中的数据 `user`
--

INSERT INTO `user` (`id`, `FirstName`, `LastName`, `Age`, `Hometown`, `Job`) VALUES
(1, 'Peter', 'Griffin', 41, 'Quahog', 'Brewery'),
(2, 'Lois', 'Griffin', 40, 'Newport', 'Piano Teacher'),
(3, 'Joseph', 'Swanson', 39, 'Quahog', 'Police Officer'),
(4, 'Glenn', 'Quagmire', 41, 'Quahog', 'Pilot');

然后就是test.html 前端页面内容

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

<form>
    <select name="users" onchange="showUser(this.value)">
        <option value="">Select a person:</option>
        <option value="1">Peter Griffin</option>
        <option value="2">Lois Griffin</option>
        <option value="3">Glenn Quagmire</option>
        <option value="4">Joseph Swanson</option>
    </select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>

<script>
    function showUser(str)
    {
        if (str=="")
        {
            document.getElementById("txtHint").innerHTML="";
            return;
        }
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","test.php?q="+str,true);
        xmlhttp.send();
    }
</script>
</body>
</html>

提交到test.php页面，对应的处理（主要是通过get获取id查询对应的记录遍历返回的）

<?php
/**
 * Created by PhpStorm.
 * User: zhangqh
 * Date: 2015/5/4
 * Time: 9:50
 */

header('Content-Type:text/html; charset=utf-8');
$q=$_GET["q"];

$con = mysqli_connect('localhost','root','','test');
if (!$con)
{
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = '".$q."'";

$result = mysqli_query($con,$sql);

echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";

while($row = mysqli_fetch_array($result))
{
    echo "<tr>";
    echo "<td>" . $row['FirstName'] . "</td>";
    echo "<td>" . $row['LastName'] . "</td>";
    echo "<td>" . $row['Age'] . "</td>";
    echo "<td>" . $row['Hometown'] . "</td>";
    echo "<td>" . $row['Job'] . "</td>";
    echo "</tr>";
}
echo "</table>";

mysqli_close($con);  // 关闭数据库连接

功能效果：

写到最后，推广下一个不错的分享平台：http://www.techshare100.com/，欢迎大家加入

天空还下着雪

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
[php] ajax交互实现选择用户名显示用户数据

写这篇文章有点厚无耻了，因为这是从学习网站上扒下来的，不过我也不在乎了，，就当写给自己看的。。高手路过就行了。如果有看不惯的，可以去www.runoob.com或www.w3school.com.cn 去看下php与ajax的交互再次声明一下，此篇功能主要是通过ajax异步动态响应数据数据表：对应的sql语句（给了这个再测试的话就更方便了）：---- 表...
复制链接

扫一扫