Ajax+php+mysql simple example of reading the database-PHP Tutorial-php.cn

Home

Backend Development

PHP Tutorial

Ajax+php+mysql simple example of reading the database

Apr 17, 2018 am 09:18 AM

php database

This article introduces a simple example of ajax php mysql reading the database. It has a certain reference value. Now I share it with you. Friends in need can refer to it

1. Create a database

create database ajaxdemo default charset utf8;

Copy after login

## Switch to the current database

use ajaxdemo;

Copy after login

Create a table and insert data

CREATE TABLE `ajaxtest` (
  `userid` int(11) NOT NULL AUTO_INCREMENT COMMENT &#39;用户id&#39;,
  `username` varchar(50) NOT NULL COMMENT &#39;用户名&#39;,
  `userpass` varchar(50) NOT NULL COMMENT &#39;密码&#39;,
  `userage` int(11) NOT NULL COMMENT &#39;年龄&#39;,
  `usersex` varchar(1) NOT NULL COMMENT &#39;性别&#39;,
  PRIMARY KEY (`userid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Copy after login

INSERT INTO `ajaxtest` VALUES (&#39;1&#39;, &#39;李四&#39;, &#39;lisi&#39;, &#39;15&#39;, &#39;男&#39;);
INSERT INTO `ajaxtest` VALUES (&#39;2&#39;, &#39;张三&#39;, &#39;lisi&#39;, &#39;20&#39;, &#39;女&#39;);
INSERT INTO `ajaxtest` VALUES (&#39;3&#39;, &#39;王五&#39;, &#39;lisi&#39;, &#39;25&#39;, &#39;男&#39;);
INSERT INTO `ajaxtest` VALUES (&#39;4&#39;, &#39;韩梅梅&#39;, &#39;lisi&#39;, &#39;25&#39;, &#39;男&#39;);
INSERT INTO `ajaxtest` VALUES (&#39;5&#39;, &#39;张莉&#39;, &#39;lisi&#39;, &#39;25&#39;, &#39;女&#39;);

Copy after login

2. Create index.php, query the information in the database and display it to the user

&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset=&quot;utf-8&quot;/&gt;
		&lt;title&gt;ajax实例&lt;/title&gt;
		&lt;link href=&quot;https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
	&lt;/head&gt;
	&lt;body style=&quot;height: 800px;&quot;&gt;
		&lt;p class=&quot;container&quot;&gt;
			&lt;p class=&quot;panel panel-default&quot; style=&quot;margin-top: 100px;text-align: center;&quot;&gt;
				&lt;p class=&quot;panel-heading&quot;&gt;
					Ajax实例
				&lt;/p&gt;
				&lt;p class=&quot;panel-body&quot;&gt;
					&lt;form class=&quot;navbar-form navbar-center&quot; role=&quot;search&quot; name=&quot;myform&quot;&gt;
						&lt;p class=&quot;form-group&quot;&gt;
							&lt;label&gt;
								年龄:&lt;input type=&quot;number&quot; class=&quot;form-control&quot; placeholder=&quot;Age&quot; name=&quot;userage&quot; id=&#39;userage&#39;/&gt;
							&lt;/label&gt;
						&lt;/p&gt;
						&lt;select class=&quot;form-control&quot; id=&quot;usersex&quot; name=&quot;usersex&quot;&gt;
							&lt;option value=&quot;男&quot;&gt;男&lt;/option&gt;
							&lt;option value=&quot;女&quot;&gt;女&lt;/option&gt;
						&lt;/select&gt;
						&lt;button type=&quot;button&quot; class=&quot;btn btn-default&quot; onclick=&#39;ajaxFunction()&#39;&gt;提交&lt;/button&gt;
					&lt;/form&gt;
					
					&lt;table class=&quot;table table-condensed table-bordered&quot; id=&quot;ajaxp&quot;&gt;&lt;/table&gt;
					&lt;p&gt;SQL语句：&lt;pre id=&quot;sql&quot;&gt;&lt;/pre&gt;&lt;/p&gt;
				&lt;/p&gt;
			&lt;/p&gt;
		&lt;/p&gt;
		
		
		&lt;script src=&quot;http://code.jquery.com/jquery-1.9.1.min.js&quot;&gt;&lt;/script&gt;
		&lt;script src=&quot;https://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
		&lt;script type=&quot;text/javascript&quot;&gt;
			function ajaxFunction()
			{
				var xmlHttp;
				try{
					xmlHttp = new XMLHttpRequest();
				}catch(e){
					//IE浏览器需要用ActiveXObject来创建 XMLHttpRequest对象
					try{
						 //如果Javascript的版本大于5
						xmlHttp=new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;);
					}catch(e){
						try{
							 //如果不是 则使用老版本的ActiveX对象
							xmlHttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);
						}catch(e){
							alert(&quot;您的浏览器不支持&quot;);
							return false;
						}
					}
				}
				xmlHttp.onreadystatechange=function(){
					if(xmlHttp.readyState==4){
						var ajaxData=document.getElementById(&quot;ajaxp&quot;);
						var sqlData=document.getElementById(&#39;sql&#39;);
						var jsonData=JSON.parse(xmlHttp.responseText);//解析json数据
						ajaxData.innerHTML=jsonData.data;
						sqlData.innerHTML=jsonData.sql;
					}
				}
				var userage=document.getElementById(&#39;userage&#39;).value;
				var usersex=document.getElementById(&#39;usersex&#39;).value;
				var url=&#39;?userage=&#39;+userage;
				url += &#39;&amp;usersex=&#39;+usersex;
				xmlHttp.open(&quot;GET&quot;,&quot;ajaxTest.php&quot;+url,true);
				xmlHttp.send(); 
			}
		&lt;/script&gt;
	&lt;/body&gt;
&lt;/html&gt;&gt;

Copy after login

3. Create ajaxtest.php to respond to the request of index.php

&lt;?php
    error_reporting(0);//不显示警告信息
    $dbhost=&quot;localhost&quot;;
    $dbuser=&quot;root&quot;;
    $dbpass=&quot;root&quot;;
    $dbname=&quot;ajaxdemo&quot;;

$mysqli=new mysqli($dbhost,$dbuser,$dbpass,$dbname);
$mysqli-&gt;query(&quot;SET NAMES &#39;UTF8&#39; &quot;);

$userage=$_GET[&#39;userage&#39;];
$usersex=$_GET[&#39;usersex&#39;];

$userage=$mysqli-&gt;real_escape_string($userage);
$usersex=$mysqli-&gt;real_escape_string($usersex);

$query=&quot;select * from ajaxtest where usersex=&#39;$usersex&#39;&quot;;

if(is_numeric($userage))
{
    $query .=&quot;AND userage &lt;= $userage;&quot;;
}
$qry_result=$mysqli-&gt;query($query);

if($qry_result-&gt;num_rows==0)
{
    echo json_encode([&#39;data&#39;=&gt;&#39;&lt;h2&gt;未找到符合条件的记录&lt;/h2&gt;&#39;,&#39;sql&#39;=&gt;$query]);
    return ;
}

$display_string =&quot;&lt;tr&gt;&quot;;
$display_string .=&quot;&lt;td&gt;用户名&lt;/td&gt;&quot;;
$display_string .=&quot;&lt;td&gt;年龄&lt;/td&gt;&quot;;
$display_string .=&quot;&lt;td&gt;性别&lt;/td&gt;&quot;;
$display_string .=&quot;&lt;/tr&gt;&quot;;

//insert a new row in the table for each person returned
while($row=mysqli_fetch_object($qry_result)){
    $display_string.=&quot;&lt;tr&gt;&quot;;
    $display_string.=&quot;&lt;td&gt;$row-&gt;username&lt;/td&gt;&quot;;
    $display_string.=&quot;&lt;td&gt;$row-&gt;userage&lt;/td&gt;&quot;;
    $display_string.=&quot;&lt;td&gt;$row-&gt;usersex&lt;/td&gt;&quot;;
    $display_string.=&quot;&lt;/tr&gt;&quot;;
}

echo json_encode([&#39;data&#39;=&gt;$display_string,&#39;sql&#39;=&gt;$query]);//返回json数据格式
?&gt;

Copy after login

Result:

Related recommendations:

PHP reads the database and sorts it according to the Chinese name implementation code_PHP tutorial

The above is the detailed content of Ajax+php+mysql simple example of reading the database. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn