如何使用ajax php和mysqli从我的数据库中读取数据 没有使用任何按钮？ 当我向表中添加一行时，我希望信息显示在页面上而不加载/刷新页面或单击按钮。我能这样做吗？
此信息将显示为下面的代码
php代码
<?php
if (isset($_GET['id'])) {
$id = intval($_GET['id']);
$date = date("l jS \of F Y");
$query = mysqli_query($conn, "select * from tbl_dailyprogress where db_activityid='$id' and db_d='1'")or die(mysqli_error($conn));
$count = mysqli_num_rows($query);
if ($count != 0) {
echo"<table class='ol-md-12 table-bordered table-striped table-condensed cf table-bordered' id='alternatecolor'>";
echo"<thead class='cf'>";
echo"<tr>";
echo" <th style='background:#f7ac01;font-size:16px;vertical-align: middle;text-align:center'rowspan='2' >Date</th>
<th style='background:#f7ac01;font-size:16px;vertical-align: middle;text-align:center'rowspan='2' >Notes</th>
<th style='background:#f7ac01;font-size:16px;vertical-align: middle;text-align:center'rowspan='2' >Progress %</th>
";
echo"</tr></thead><tbody>";
while ($row = mysqli_fetch_array($query)) {
$idp = $row['db_id'];
$date = $row['db_date'];
$note = $row['db_note'];
$progress = $row['db_progress'];
echo"<tr>";
echo"<td data-title='Date'>";
echo $date;
echo"</td>";
echo"<td data-title='Note'>";
echo $note;
echo"</td>";
echo"<td data-title='Progress %'>";
echo'
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:' . $progress . '%">
' . $progress . '%
</div>
</div>';
echo"</td>";
}
echo"</tr></tbody>";
echo"</table>";
echo"<br/>";
}?>
答案 0 :(得分：1)
简单示例，以免假设您从页面my_data.php加载容器div标记import React, { Component } from 'react'; import { View } from 'react-native';
import {
AppRegistry,
StyleSheet,
Text,
TextInput,
TouchableHighlight,
ActivityIndicator,
NavigatorIOS,
ListView,
Image,
WebView,
} from 'react-native';
var GoogleStaticMap = require('react-google-static-map');
class Single extends Component {
render() {
return (
<Image style={styles.container} source={require('../../images/home.jpg')}>
<View style={styles.map}>
<GoogleStaticMap
style={styles.map}
latitude={'32.064171'}
longitude={'34.7748068'}
zoom={13}
size={{ width: 300, height: 550 }} />
<View style={styles.business}>
<Text style={styles.businessName}>{this.props.property.street_address} {this.props.property.postcode}</Text>
</View>
<View style={styles.overview}>
<Text style={styles.heading}>
Overview
</Text>
<Text style={styles.bodyText}>{this.props.property.overview}</Text>
</View>
<View style={styles.overview}>
<Text style={styles.heading}>
Opening Hours
</Text>
<Text style={styles.bodyText}>Monday {this.props.property.opening_hours.monday_open} - {this.props.property.opening_hours.monday_close}</Text>
<Text style={styles.bodyText}>Tuesday {this.props.property.opening_hours.monday_open} - {this.props.property.opening_hours.monday_close}</Text>
<Text style={styles.bodyText}>Wednesday {this.props.property.opening_hours.monday_open} - {this.props.property.opening_hours.monday_close}</Text>
<Text style={styles.bodyText}>Thursday {this.props.property.opening_hours.monday_open} - {this.props.property.opening_hours.monday_close}</Text>
<Text style={styles.bodyText}>Friday {this.props.property.opening_hours.monday_open} - {this.props.property.opening_hours.monday_close}</Text>
<Text style={styles.bodyText}>Saturday {this.props.property.opening_hours.monday_open} - {this.props.property.opening_hours.monday_close}</Text>
<Text style={styles.bodyText}>Sunday {this.props.property.opening_hours.monday_open} - {this.props.property.opening_hours.monday_close}</Text>
</View>
</View>
</Image>
)
}
}
const styles = StyleSheet.create({
business: {
backgroundColor: 'rgba(0,0,0,0.5)',
marginTop: 10,
},
businessName: {
fontSize: 14,
padding:10,
color: '#ffffff'
},
map: {
flex: 1,
marginTop: 30,
width: null,
height:10,
},
overview: {
marginTop: 30,
left:0,
height:null,
backgroundColor: 'rgba(0,0,0,0.5)',
},
bodyText: {
color: '#ffffff',
padding: 10,
},
heading: {
padding:5,
backgroundColor: '#008983',
color: '#ffffff'
},
container: {
flex: 1,
marginTop: 50,
width:null,
height:null,
},
backdropView: {
top:100,
height: 200,
width: 320,
backgroundColor: 'rgba(0,0,0,0.5)',
},
headline: {
fontSize: 20,
textAlign: 'center',
padding:40,
backgroundColor: 'rgba(0,0,0,0)',
color: 'white'
},
backdropViewTitle: {
color: 'white',
textAlign: 'center',
padding:10,
fontSize: 20,
},
search: {
height:50,
fontSize: 15,
borderWidth: 1,
borderColor: '#fff',
borderRadius: 1,
color: '#fff',
width:295,
marginTop:10,
marginLeft:10,
padding:10
},
content:{
backgroundColor:'#ebeef0',
flex:1,
alignItems:'center' //<-----
},
messageBoxTitleText:{
fontWeight:'bold',
color:'#fff',
textAlign:'center',
fontSize:20,
marginBottom:10
},
messageBoxBodyText:{
color:'#fff',
fontSize:16
},
logo: {
top:50,
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
flowRight: {
flexDirection: 'row',
alignItems: 'center',
width: 300,
left:60
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
button: {
top:10,
left:10,
height: 40,
width:100,
flexDirection: 'row',
backgroundColor: '#48BBEC',
borderColor: '#48BBEC',
marginBottom: 10,
alignSelf: 'stretch',
justifyContent: 'center'
},
searchLocation: {
height: 36,
padding: 4,
marginRight: 5,
flex: 5,
fontSize: 10,
borderWidth: 1,
borderColor: '#48BBEC',
borderRadius: 8,
color: '#48BBEC',
},
searchInput: {
height: 36,
padding: 4,
marginRight: 5,
flex: 4,
fontSize: 10,
borderWidth: 1,
borderColor: '#48BBEC',
borderRadius: 8,
color: '#48BBEC'
},
});
module.exports = Single;
中的数据
<div id="container"></div>答案 1 :(得分：0)
理论上，不可能在服务器端捕获事件。
实际上，它是通过向服务器发送请求并获得响应来完成的。
您只需要定期使用ajax发送一些请求。如果数据库中有新信息，ajax会将其返回给客户端。然后你可以处理它。
答案 2 :(得分：0)
由于您没有经验，我建议您首先通过w3schools Ajax PHP教程...您将了解如何实现ajax功能，并且您将了解Ajax可以做什么以及Ajax不能做什么。 ..