使用javascript从Mysql数据库中检索数据?

时间:2013-12-19 16:37:53

标签: javascript mysql google-maps

我正在尝试从数据库中检索具有我填充的坐标的数据,并且我有一个显示地图的小网页,但我需要在查看之前从数据库中选择经度和纬度,所以是否可以在java脚本中连接和检索数据?!

这是wepage xml:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Map.aspx.cs" Inherits="Map2" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script language="javascript" type="text/javascript">

        //document.write("<?php echo 'hello'; ?>");

//select coordinates from Mysql DB
        var map;
        var geocoder;
        var marker;
        function InitializeMap() {

            var latlng = new google.maps.LatLng(/*fetchedFromDB*/, /*fetchedFromDB*/);
            var myOptions =
            {
                zoom: 17,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                disableDefaultUI: true
            };
            map = new google.maps.Map(document.getElementById("map"), myOptions);
            marker = new google.maps.Marker({ position: new google.maps.LatLng(/*fetchedFromDB*/, /*fetchedFromDB*/), map: map });
        }

        window.onload = InitializeMap;

    </script>
    </head>
    <body style="height: 504px">
    <table>
    <tr>
    </tr>
    <tr>
    <td colspan ="2">
    <div id ="map" style="height: 529px; width: 1011px; margin-top: 0px;" >
    </div>
    </td>
    </tr>
    </table>
    </body>
    </html>

3 个答案:

答案 0 :(得分:8)

大多数情况下,只需使用AJAX即可。

基本上你需要一些服务器端脚本,根据请求从数据库中提取数据并以某种格式将其返回给javascript(例如JSON)。从客户端javascript中,当页面加载或用户单击某个按钮等时,您可以通过XMLHttpRequest调用此脚本。

答案 1 :(得分:0)

您希望最大限度地减少两种语言交换数据的区域数量。最多将所有内容放在一个对象中并将其转换为json:

<?php
  $data = array( 'a' => $a );
?>
var data = <?php echo json_encode($data); ?>;

虽然更好的方法是编写一个除了输出JSON数据之外什么都不做的页面,然后用AJAX调用读取它。

答案 2 :(得分:0)

我已经以一种简单的方式解决了这个问题,我从数据库中检索了坐标,然后我在后面的代码中运行了脚本(在c#代码中),如下所示:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using MySql.Data.MySqlClient;

public partial class Map : System.Web.UI.Page
{

    public static string latitude;
    public static string longitude;
    MySqlDataReader dr;

    protected void Page_Load(object sender, EventArgs e)
    {
        using (MySql.Data.MySqlClient.MySqlConnection connection = new MySql.Data.MySqlClient.MySqlConnection("Server=XX;Port=3306;Database=XX;Uid=XX;Pwd=XX"))
        {
            connection.Open();
            MySqlCommand cmd = connection.CreateCommand();
            cmd.CommandText = "SELECT latitude,longitude FROM coordinates";

            dr = cmd.ExecuteReader();

            while (dr.Read())
            {
                latitude = dr[0].ToString();
                longitude = dr[1].ToString();
            }
            connection.Close();
        }


        Response.Write("<script type='text/javascript' src='http://maps.googleapis.com/maps/api/js?sensor=false'></script>");
        Response.Write("<script language='javascript' type='text/javascript'>"
            + "var map;" 
        + "var marker;" 
        + "function InitializeMap() {"
        + "var latlng = new google.maps.LatLng(" + latitude + "," + longitude + ");"
        + "var myOptions ="
        + "{ zoom: 17, center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP,disableDefaultUI: true};"
        + "map = new google.maps.Map(document.getElementById('map'), myOptions);"
        + "marker = new google.maps.Marker({ position: new google.maps.LatLng(" + latitude + ", " + longitude + "), map: map }); }"
        + "window.onload = InitializeMap;"

        + "</script>");


    }
}