个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-29 03:21:41 25 4
gpt4 key购买 nike

我正在尝试创建一个允许用户将地址输入到 html 表单中的网站。当用户点击提交按钮时，我希望 php 获取表单数据，然后使用该数据访问存储地址的 mysql 数据库，基于表单数据，php 将查询 mysql 数据库并返回给定距离内的地址.然后我想使用 ajax 将该结果传递到 javascript 中，我将在其中使用数据创建一个谷歌地图，并将所有地址绘制到 map 上。我现在遇到的问题只是用 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);

?>

最佳答案

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

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

或另一个标签的按钮，例如 

<a></a>.

并使用 PDO 而不是 mysqli。对你会更好

关于javascript - mysql 查询数据未通过 ajax 从 php 正确传递到 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43443080/

25 4 0
文章推荐： php - 如何使用 laravel where 子句和 created_at 从数据库中选择
文章推荐： Java SimpleDateFormat 剪切 SSS 的尾随 0 位
文章推荐： java - 在 Java 中使用 MySQL 数据库的一些代码总是返回错误/未创建帐户？
文章推荐： java - MySQL JDBC 中的服务器端游标支持
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com