Question

我正在尝试创建一个允许用户在html表单中输入地址的网站。当用户点击提交按钮时，我希望php获取表单数据，然后使用该数据访问存储地址的mysql数据库，基于php将查询mysql数据库的表单数据并返回给定距离内的地址。然后我想使用ajax将该结果传递到javascript中，我将使用该数据创建一个谷歌地图，其中所有地址都绘制在地图上。我现在遇到的问题只是在javascript中向控制台显示数据。我注意到每次点击提交按钮时，好像html页面正在刷新，所以我认为刷新可能是导致数据无法正常传递的原因。

HTML表单代码（使用javascript / ajax）

<html>
<head>
<title></title>
</head>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <div class = "container">
    <nav class = "navbar navbar-inverse">
      <div class = "container-fluid">
        <div class = "navbar-header">
          <a class = "navbar-brand" href = "home.html">YardSaleMapper.com</a>
        </div>
        <ul class = "nav navbar-nav">
          <li><a href = "home.html">Go Home</a></li>
          <li class = "active"><a href = "viewSales.php">View Sales</a></li>
          <li><a href = "addSale.html">Publish your Sale</a></li>
        </ul>
      </div>
    </nav>
    <h3>Enter Starting Point</h3>
    <hr/>
    <form method = "post" id = "myForm">
      <div class = "col-md-2">
        <div class = "form-group">
          Street:
          <input class = "form-control" type = "text" name = "start_street" ng-model = "ss" required/>
        </div>
      </div>
      <div class = "col-md-2">
        <div class = "form-group">
          City:
          <input class = "form-control" type = "text" name = "start_city" ng-model = "ss" required/>
        </div>
      </div>
      <div class = "col-md-2">
        <div class = "form-group">
          State (EX: PA):
          <input class = "form-control" type = "text" name = "start_state" ng-model = "ss" maxlength="2" required/>
        </div>
      </div>
      <div class = "col-md-2">
        <div class = "form-group">
          ZIP
          <input class = "form-control" type = "text" name = "start_zip" ng-model = "ss" maxlength="5" required/>
        </div>
      </div>
      <div class = "col-md-2">
        <div class = "form-group">
          Within <select type = "text" name = "distance" required  class = "form-control">
            <option value = 5>5</option>
            <option value = 10>10</option>
            <option value = 15>15</option>
            <option value = 20>20</option>
            <option value = 25>25</option>
          </select>
          Miles
        </div>
      </div>
      <div class = "col-md-2">
        <div class = "form-group">
          &nbsp
          <button class ="btn btn-primary btn-block" id = "submit" type = "submit" name = "submit">Submit</button>
        </div>
      </div>
    </form>
  </div>

  <script id = "source" language = "javascript" type = "text/javascript">
  $(function() {
    $('#submit').on('click', function() {
      $.ajax({
        url: 'getSales.php',
        method: 'post',
        data: $("#myForm").serialize(),
        dataType: 'json',
        success: function(data) {
          console.log(data);
        }
      })
    })
  });
  </script>

</body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


</html>

PHP代码访问mysql数据库并回显结果。

<?php
  $servername = "localhost";
  $username = "username";
  $password = "password";
  $dbname = "yardsales";

  $data = array();

  // Create connection
  $conn = new mysqli($servername, $username, $password, $dbname);
  // Check connection
  if ($conn->connect_error) {
      die("Connection failed: " . $conn->connect_error);

  }

  $street = $_POST["start_street"];
  $city = $_POST["start_city"];
  $state = $_POST["start_state"];
  $zip = $_POST["start_zip"];
  $dist = $_POST["distance"];

  $address = $street . ", " . $city . ", " . $state . ", " . $zip;

  $geo = file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?address='.urlencode($address).'&sensor=false');

  // Convert the JSON to an array
  $geo = json_decode($geo, true);

  if ($geo['status'] == 'OK') {
    // Get Lat & Long
    $lat = $geo['results'][0]['geometry']['location']['lat'];
    $long = $geo['results'][0]['geometry']['location']['lng'];

  }

  $sql = "SELECT street, city, state, zip, county, sdate, edate,
  stime, etime, description, 69 * vincenty($lat, $long, lat, lon) AS distance from
  addresses where 69 * vincenty($lat, $long, lat, lon) < $dist";

  $result = $conn->query($sql);

  while($row = $result->fetch_assoc()) {
    $data[] = $row;
    //print_r($row);
  }

  echo json_encode($data);

?>

Answer 1

您的提交按钮正在发布帖子请求并刷新页面，因此Javascript会丢失其数据。你必须改变这个：

<form method = "post" id = "myForm">

或其他标签的按钮，例如

<a></a>.

使用PDO而不是mysqli。会更好吗

mysql查询数据未正确通过ajax从php传递给javascript

1 个答案: