使用php ajax和json在html中显示mysql数据时出错 - Error in displaying mysql data in html using php ajax and json

这是我的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)
?>

我试图显示mysql数据在html页面使用php, ajax和json。

首先在html页面中，当我单击generate按钮时，我需要显示已经插入到add_exhibitor表中的数据。我检索的数据从add_exhibitor表在php也我编码的数据。另外，我在html页面中编写了一个ajax函数来显示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);
$r = mysqli_fetch_array($result);
$rows = array();
$rows[] = $r;
echo json_encode($rows);
mysqli_close($con);

工作吗?

尝试在代码底部使用header函数:

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

你需要一个类似于"onclick"的eventandler，这样当按钮被点击时它就会调用AJAX。

我假设你的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);
                }
            });
        }
    });
});

希望，它会帮助你…!

我希望，你的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>