使用php ajax和json在html中显示mysql数据时出错答案

【问题标题】：Error in displaying mysql data in html using php ajax and json使用php ajax和json在html中显示mysql数据时出错
【发布时间】：2017-01-08 17:02:50
【问题描述】：

这是我的html：

  <html>
  <body>
  <button type="submit" id="search" class="btn btnprimary">GENERATE</button>
  <div id="con">"Hello!"</div>
  </body>
 </html>

而ajax函数是：

<script type="text/javascript">
    $("#search").click(function(){
    $.ajax({
    type:"POST",
    url:"exhibitor_creator.php",
    data:data,
    dataType:"json",
	var id=data[0];
	var name=data[1];
	var mail=data[2];
	var pwd=data[3];
	$('#con').html("<b>id: </b>"+id+"<b> Name: </b>"+name+"<b> Mail Id:  
    </b>"+mail+"<b> Password: </b>"+pwd);
    });
    });   
    </script>

我的 php 是：

<?php
$con=mysqli_connect("localhost","root","","sample");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$query = "select * from add_exhibitor";
$result = mysqli_query($con,$query);
$rows = array();
while($r = mysqli_fetch_array($result)) {
$rows[] = $r;
}
echo json_encode($rows);
mysqli_close($con)
?>

我正在尝试使用 php、ajax 和 json 在 html 页面中显示 mysql 数据。

当我点击生成按钮时，首先在html页面中，我需要显示已经插入add_exhibitor表中的数据。我从 php 中的add_exhibitor 表中检索了数据，我也对数据进行了编码。我还在 html 页面中编写了一个 ajax 函数来显示来自 php 页面的数据。但它不工作。请告诉我如何解决这个问题

【问题讨论】：

你说“它不工作”。它做错了什么？您收到任何错误消息吗？他们说什么？
没有错误信息。相反，它只是显示 html 页面
@AnuKarthi 如果我理解您的问题..您只想将值附加到 html 页面（来自数据库的数据）.. 是吗
请编辑您的代码，使其易于阅读，但主要是使其不包含错误。现在您的 ajax 对象没有 success 属性。
@AnuKarthi 我建议您通过浏览器中的控制台窗口检查 javascript 错误。它可能对您有很大帮助。

标签： php ajax json

【解决方案1】：

试试这个代码 php:

$con=mysqli_connect("localhost","root","","sample");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$query = "select * from add_exhibitor";
$result = mysqli_query($con,$query);
$r = mysqli_fetch_array($result);
$rows = array();
$rows[] = $r;
echo json_encode($rows);
mysqli_close($con);

工作？

【讨论】：

【解决方案2】：

尝试使用代码底部的 header 函数：

header("Content-type: application/json");
echo json_encode($rows);
exit();

【讨论】：

【解决方案3】：

您需要像“onclick”这样的事件处理程序，以便在单击按钮时调用 AJAX。

【讨论】：

【解决方案4】：

我假设，您的 php 文件以 json 格式给出结果，如

{"id":"1", "name": "anyname", "mail":"youremail", "password":"your password"}

现在，如果我了解您的问题，您希望将此数据附加到您的 html 文件中。为了这。 试试这些代码..

Your-html-filename.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="con">"Hello!"</div>

    <label for="" id="id"></label>
    <label for="" id="name"></label>
    <label for="" id="mail"></label>
    <label for="" id="password"></label>
    <button type="submit" id="search" class="btn btnprimary">GENERATE</button>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>"></script>
<script src="data.js"></script>"></script>
</html>

现在，制作另一个 js 文件，如

data.js

$(document).ready(function() {
$("#search").on('click', function(){

    $.ajax({
        url: 'your-phpfilename.php',
        type: 'GET',
        success:function(data)
        {
            var result = $.parseJSON(data);
            $.each(result,function(key,value){
                if(key === 'id')
                {
                    $("#id").append(value);
                }if(key === 'name')
                {
                    $("#name").append(value);
                }if(key === 'mail')
                {
                    $("#password").append(value);
                }if(key === 'password')
                {
                    $("#password").append(value);
                }
            });
        }
    });
});

希望对你有所帮助..！

【讨论】：

请您将所有文件连同数据库文件一起放在 dropbox 中吗？

【解决方案5】：

我希望，你的 php 文件可能会给出这样的 json 结果

    [{"id":"1", "name":"xxxx", "mail":"xxxx@yyy.com", "pwd":"123@#$ABC"}]

请尝试这些代码

file_name.html

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>"></script>
        <script src="myScript.js"></script>
    </head>
    <body>
        <button id="search" class="btn btnprimary" onclick="result()">GENERATE</button>
        <div id="con"><p>"Hello!"</p></div>
    </body>
    </html>

myScript.js

    <script type="text/javascript">
    function result(){
    var len = $("#con p").length;
    $.get(
        'exhibitor_creator.php',
        function(data){
            if ( len == 1 ) {
                $.each(data, function(key, value){
                    $( "#con" ).append("<p><b>ID:&nbsp;</b>" + data[key].id + "<b>&nbsp;Name:&nbsp;</b>" + data[key].name + "<b>&nbsp;Mail:&nbsp;</b>" + data[key].mail + "<b>&nbsp;Password:&nbsp;</b>" + data[key].pwd) + "</p>";
                })
            }
        },
        'json'
    );  
    }   
    </script>

【讨论】：