gpt4 book ai didi

javascript - 从 Javascript 输入变量到 Mysqli 数据库

转载 作者:行者123 更新时间:2023-12-03 09:22:23 25 4
gpt4 key购买 nike

我目前正在使用 HTML 表单来发布到 PHP 文件,该文件在 将输入数据转入 MYSQLi 数据库(这一切都是在 本地主机)。我想使用 map ,但是允许用户指定 事件地点更方便。我目前正在使用 Google Maps API 和 文件 geo.php 中的变量 results[0] (如下所示)是 我想输入到 MYSQLi 数据库中。

我不知道该怎么做。我听说 AJAX,当我尝试这样做时,它似乎不起作用(可能是因为我完全不熟悉它)。我是一个 尽管我非常熟悉,但对 Javascript 完全陌生 使用 PHP/HTML/CSS。

提前致谢!

form.php

<html>

<div id="form">
<form action="post.php" class="js-ajax-php-json" method="post" >
Event Title<br />
<input type="text" name="title" placeholder="Title" >
<br><br>
Details<br>
<textarea name="details" id="textarea" placeholder="Details" maxlength="10" cols="40" rows="10"></textarea>
<br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
<?php include 'includes/overall/geo.php' ?>
</div>

</html>

在此表单末尾,请注意包含的 Google Maps API 地理编码器和 map

geo.php

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 70%;
margin: 0;
padding: 0;
}

#panel {
position: absolute;
top: 330px;
left: 26%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}

#panel, .panel {
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}

#panel select, #panel input, .panel select, .panel input {
font-size: 15px;
}

#panel select, .panel select {
width: 100%;
}

#panel i, .panel i {
font-size: 12px;
}

</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 9,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location

});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>
<div id="panel">
<input id="address" type="textbox" value="Sydney, NSW">
<input type="button" value="Geocode" onclick="codeAddress()">
</div>
<div id="map-canvas"></div>
</body>
</html>

post.php

<?php

$title = $_POST["title"];
$details = $_POST["details"];

//I WISH TO GET THE LOCATION (address[0]) FROM geo.php
//AND INPUT IT INTO MYSQLi HERE

include 'core/con.php';//Connects to the database

$errors = array();

if(mysqli_query($conn,"INSERT INTO events (`title`, `details`, `location`) VALUES ('$title', '$details', '$location')")) {
header("Location: url/form.php");
die();

} else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
?>

I have been stuck on how to do this for a while and greatly appreciate any help!

最佳答案

一个简单的方法是这样的,使用javascript来改变某个输入的值

只需在表单示例中添加隐藏输入:<input id="geocode" type="hidden" name="geocode" />

然后你在 codeAddress() 中输入一行函数您必须添加一行,您可以在其中更改隐藏输入的值

function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location

});
//SEE HEREEEEE
document.getElementById('geocode').value = marker.results[0].geometry.location; //this is how you manipulate the value of the hidden input
} else {
alert('Geocode was not successful for the following reason: ' + status);
}

在你的 php 中,只需访问 post 值

$_POST['geocode']

关于javascript - 从 Javascript 输入变量到 Mysqli 数据库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31805022/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com