Javascript 数据库数据永远不会显示在html中_Javascript_Php_Html_Mysql_Categories

Javascript 数据库数据永远不会显示在html中

javascript php html mysql

Javascript 数据库数据永远不会显示在html中,javascript,php,html,mysql,categories,Javascript,Php,Html,Mysql,Categories,我试图从数据库中收集类别数据，并以html格式显示在类别下拉列表中。然而，这是行不通的。我不知道哪一部分出了问题。输出返回null，它从不从数据库类别表收集任何数据这是我的html文件 <!DOCTYPE html> <html> <style> input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-ap

我试图从数据库中收集类别数据，并以html格式显示在类别下拉列表中。然而，这是行不通的。我不知道哪一部分出了问题。输出返回null，它从不从数据库类别表收集任何数据

这是我的html文件

<!DOCTYPE html>
<html>
<style>
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}



</style>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/ionic.min.css" />
    <title>Create an Account</title>
</head>
<body onload="selectCategory()">
<div class="bar bar-header">
    <a href="index.html" class="button button-clear button-royal">Back</a>
    <h1 class="title">Add an Item</h1>

</div>
<div class="padding" style="margin-top:75px;">
    <label class="item-input">
        <span class="input-label">Item Name</span>
        <input type="text" placeholder="" id="itemName">
    </label>
    <label class="item-input">
        <span class="input-label">Category</span>
        <select id="select_category">
            <option value="0">- Select -</option>
        </select>

    </label>
    <label class="item-input">
        <button class="button button-block button-positive" id="signup">Add item</button>
    </label>


</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jq.js"></script>
<script type="text/javascript" src="js/addProduct.js"></script>
</body>

</html>

addProduct.js

    function selectCategory() {
        $.ajax({
                    url: 'http://selectCategory.php?callback=?',
                    type: 'post',
                    data: "",
                    dataType: 'json',
                    success:function(response){

                        var len = response.length;

                        $("#select_category").empty();
                        for( var i = 0; i<len; i++){
                            var id = response[i]['id'];
                            var name = response[i]['name'];

                            $("#select_category").append("<option value='"+id+"'>"+name+"</option>");

                        }
                    }
                });
    }

selectCategory.php

<?php
header("Access-Control-Allow-Origin: *");

$host = 'localhost';
$username = 'username';
$password = 'password';
$database = 'database';

$pdo = new PDO("mysql:host=$host;dbname=$database", $username, $password);
$stmt = $pdo->query("SELECT * FROM category");

$users_arr = array();

while ($row = $stmt->fetch()) {
    $users_arr[] = array("id" => $row['id'], "name" => $row['name']);
}

// encoding array to json format
echo json_encode($users_arr);
?>

在selectCategory.php文件中，您有以下部分：

$.ajax({
   url: 'http://selectCategory.php?callback=?',

您的请求中有HTTP，它应该是对不同域的调用，在您的情况下不是，而且回调参数实际上没有做任何事情，请尝试这样更改它：

$.ajax({
   url: '/selectCategory.php',

您使用的是mysql\u connect和mysql\u select\u db，这两个函数都是不推荐使用的函数。改为使用PDO访问您的数据库：

<?php
header("Access-Control-Allow-Origin: *");

$host = 'localhost';
$username = 'username';
$password = 'password';
$database = 'database';

$pdo = new PDO("mysql:host=$host;dbname=$database", $username, $password);
$stmt = $pdo->query("SELECT * FROM category");

$users_arr = array();

while ($row = $stmt->fetch()) {
    $users_arr[] = array("id" => $row['id'], "name" => $row['name']);
}

// encoding array to json format
echo json_encode($users_arr);
?>

在addProduct.js中，删除http://from？实际上这是一个phonegap项目，php文件存储在在线服务器上，与html文件不同的位置确定，在selectCategory.phpyah之前添加域名或IP地址，我也删除了回调，但如果你直接转到selectCategory.php，它会返回null。它会输出文本吗？实际上这是一个phonegap项目，php文件存储在在线服务器上，与html文件的位置不同，然后你必须将在线服务器的位置放在ajax callyes上，我确实这样做了，而且我也删除了回调参数，但是当我直接转到selectCategory.php的位置时，它会返回我nullUse PDO或mysqli面向对象的样式，因为您引用的是一个$con变量，它不存在。啊，我现在使用了PDO，selectCategory.php现在返回我正确的数据。但是，它仍然不会显示在html文件中。使用此代码，selectCategory.php已经返回了正确的数据，但它仍然不会显示在html文件中。有两件事：在标记中，您有两个body。在$.ajax中，将type更改为“get”，因为我已经删除了主体。我将类型更改为get，但它也不会显示。我认为在success函数中不是get或post issuePut console.logresponse，它是否在开发者控制台中显示任何内容？