AJAX处理php文件示例

来源：互联网发布：nginx 如何配置conf 编辑：程序博客网时间：2024/05/23 22:49

一个下拉框，根据选择项，和数据库进行比对，最后传回来相应的提示信息，
首先配置数据库（学习用的wamp的mysql）示例：

create database ajax charset=utf8;use ajax;create table user(    id int auto_increment comment 'id',    firstname varchar(20) not null,    lastname varchar(20) not null ,    age int not null,    hometown varchar(20) not null ,    job varchar(20),    primary key(id))charset=utf8;insert  user(firstname,lastname,age,hometown,job)value('Peter', 'Griffin',41,'Quahog','Brewery'),('Lois' ,  'Griffin',40,'Newport','Piano Teacher'),('Joseph','Swanson',39,'Quahog','Police Officer'),('Glenn' ,'Quagmire',41,'Quahog','Pilot');

然后php代码如下：

<?phpheader("Content-Type:text/html;Charset=utf-8");$q=$_GET['q'];//连接数据库$conn=mysqli_connect('localhost:3306','root','');if(!$conn){    die('数据库连接失败'.mysql_error($conn));};mysqli_query($conn,'use ajax');$sql="select * from user where id=$q";$result=mysqli_query($conn,$sql);$row= mysqli_fetch_assoc($result);$row=json_encode($row);//转成JSON形式字符串echo ($row);mysqli_close($conn);?>

最后附上html代码：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <h1 style="font-size: 100px;text-align: center;">AJAX</h1>        <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>        <hr />        <table border="1" cellpadding="5" cellspacing="0">            <thead>                <tr>                    <td>FirstName</td>                    <td>LastName</td>                    <td>age</td>                    <td>hometown</td>                    <td>job</td>                </tr>            </thead>            <tbody>            </tbody>        </table>        <script>            var tbody=document.getElementsByTagName('tbody')[0];            var str='';            function showUser(str){                //检查是否有用户被选择                if (str==""){                    tbody.innerHTML='';                    return;                }                //创建 XMLHttpRequest 对象                if (window.XMLHttpRequest){                    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码                    xmlhttp=new XMLHttpRequest();                }else{                    // IE6, IE5 浏览器执行代码                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");                }                //创建在服务器响应就绪时执行的函数                xmlhttp.onreadystatechange=function(){                    if (xmlhttp.readyState==4 && xmlhttp.status==200){                        //把字符串转为json 对象                        var data=JSON.parse(xmlhttp.responseText);                        tbody.innerHTML ='<tr><td>'+data['firstname']+'</td><td>'+data['LastName']+'</td><td>'+data['age']+'</td><td>'+data['hometown']+'</td><td>'+data['job']+'</td></tr>';//当然，数据多可以用for in遍历                    }                }                //请注意添加到 URL 末端的参数（q）（包含下拉列表的内容）                xmlhttp.open("GET","9.php?q="+str,true);                //向服务器上的文件发送请求                xmlhttp.send();//      如果是用post：/*//创建一个请求        xmlhttp.open('post',"./9.php?",true);        //设置http头协议信息        xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");        var info="q="+str;//发送请求        xmlhttp.send(info);*/            }           </script>    </body></html>

阅读全文

0 0