从数据库中获取多个记录而不刷新页面

时间:2015-06-29 11:18:18

标签: jquery mysql ajax

我一直在寻找一段时间并且看过很多关于这个主题的帖子,但我无法弄清楚为什么我的脚本无效。

我想通过点击div从我的数据库中获取多条记录。我有2个文件:test.html和test.php。

我检查了test.php返回那个oke的输出,还检查了它是否是valide json,情况也是如此。我认为问题是我如何处理test.html中返回的数据

的test.html

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript">

            $(document).ready(function () {
                "use strict";
                $('.clickable').click(function () {
                    $.ajax({
                        type: "POST",
                        url: "test.php",
                        dataType: "json",
                        success: function (data) {
                            var obj = JSON.parse(data);
                            $.each(obj, function (index, value) {
                                $('#output').append(index + " : " + value.id + " " + value.column1 + " " + value.column2);
                            });
                        }
                    });
                });
            });

        </script>
        <style>

            .clickable { 
                cursor: pointer; 
                color: blue; 
            }

            .clickable:hover, .clickable.hover { 
                text-decoration: underline; 
            }

            .clickable:active{ 
                color: black; 
            }

        </style>
    </head>
    <body>
        <h3><div class="clickable">Click here</div></h3>
        <div id="output">Text will come</div>


    </body>
</html>

test.php的

<?php

$user = "root";
$pass = "***";
$host = "localhost";
$dbdb = "testDB";

$connect = mysqli_connect($host, $user, $pass, $dbdb);
if(!$connect)
{
    trigger_error('Error connection to database: '.mysqli_connect_error());
}

$result = mysqli_query($connect, "SELECT * FROM `testtable`"); 

$json = array();

while($array = mysqli_fetch_assoc($result)){

    $json[] = $array;

} 

echo json_encode($json);
?> 

输出test.php:

[{"id":"1","column1":"Mike","column2":"23"},{"id":"2","column1":"math","column2":"56"},{"id":"3","column1":"Peter","column2":"78"},{"id":"4","column1":"Alice","column2":"32"},{"id":"5","column1":"John","column2":"26"},{"id":"6","column1":"Mark","column2":"11"},{"id":"7","column1":"Paul","column2":"47"},{"id":"8","column1":"Phil","column2":"90"}] 

2 个答案:

答案 0 :(得分:1)

更改以下内容

def register_user(**kwargs):
confirmation_link, token = None, None
kwargs['password'] = encrypt_password(kwargs['password'])
user = _datastore.create_user(**kwargs)
_datastore.commit()

if _security.confirmable:
    confirmation_link, token = generate_confirmation_link(user)
    do_flash(*get_message('CONFIRM_REGISTRATION', email=user.email))

user_registered.send(app._get_current_object(),
                     user=user, confirm_token=token)

if config_value('SEND_REGISTER_EMAIL'):
    send_mail(config_value('EMAIL_SUBJECT_REGISTER'), user.email, 'welcome',
              user=user, confirmation_link=confirmation_link)

return user

&#13;
&#13;
var obj = JSON.parse(data);
$.each(obj, function(index, value)){
       $('#output').append(index+" : "+value);
}
&#13;
var data = '[{"id":"1","column1":"Mike","column2":"23"},{"id":"2","column1":"math","column2":"56"},{"id":"3","column1":"Peter","column2":"78"},{"id":"4","column1":"Alice","column2":"32"},{"id":"5","column1":"John","column2":"26"},{"id":"6","column1":"Mark","column2":"11"},{"id":"7","column1":"Paul","column2":"47"},{"id":"8","column1":"Phil","column2":"90"}]';

var obj = JSON.parse(data);
$.each(obj, function(index, value){
  $('#output').append(value.id + ": " + value.column1 + " " + value.column2 + "<br />");
})
&#13;
&#13;
&#13;

您没有正确关闭<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="output"></div>来电,您必须选择要追加的属性。

答案 1 :(得分:0)

您的$.each编写错误。有一个不需要的右括号)

                                  |
                                  |
                                  v
$.each(obj, function(index, value)){
   $('#output').append(index+" : "+value);
})

所以请尝试将其更改为:

$.each(obj, function (index, value) {
    $('#output').append(index + ": " + value);
});