0

我有一点 JSONP/jQuery/Ajax 问题。

我使用 PHP 脚本从 MySQL 数据库中获取一些数据并将它们显示在页面上。

这是我使用的 PHP 代码：

header('Content-type: application/json');

$server = "localhost";
$username = "XXXXX";
$password = "XXXXX";
$database = "XXXXX";

$con = mysql_connect($server, $username, $password) or die ("Could not connect: " . mysql_error());
mysql_select_db($database, $con);

$sql = "SELECT id, vorname, nachname, beruf FROM myvalues";
$result = mysql_query($sql) or die ("Query error: " . mysql_error());

$records = array();

while($row = mysql_fetch_assoc($result)) {
    $records[] = $row;
}

mysql_close($con);

echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';

我得到的结果如下：

<br />
<b>Notice</b>:  Undefined index: jsoncallback in <b>C:\xampp\htdocs\jsontest\lcl_request_grp.php</b> on line <b>23</b><br />
([{"id":"1","vorname":"Hallo","nachname":"Bayer","beruf":"Student"},{"id":"2","vorname":"Romy","nachname":"Bayer","beruf":"Bank"},{"id":"3","vorname":"Walter","nachname":"Bayer","beruf":"Pensionist"},{"id":"4","vorname":"Ilaria","nachname":"Pirruccio","beruf":"Kleinkindererzieherin"},{"id":"5","vorname":"Marcel","nachname":null,"beruf":"Maurer"},{"id":"6","vorname":"Hans","nachname":"Muster","beruf":"Bauer"},{"id":"7","vorname":"Luca","nachname":"Stomeo","beruf":"informatiker"},{"id":"8","vorname":"Joan","nachname":"Lehmann","beruf":"Hausfrau"},{"id":"9","vorname":"Tanja","nachname":"Blumer","beruf":"Coiffeuse"},{"id":"10","vorname":"Vorname","nachname":"Nachname","beruf":"Internetseite"}]);

到目前为止，它工作得很好。除了开头的两行。

这是我的 html 来获取 php-page 的信息：

<html>
<head> 
    <title>Produktkonfigurator</title> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css">
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>

        <script type="text/javascript">
        $(document).ready(function() {
            var output = $('#output');
            $.ajax({
                url: 'http://localhost/jsontest/lcl_request_grp.php',
                //url: 'http://qvixxtest.funpic.de/jsontest/request_grp.php',
                dataType: 'jsonp',
                data: 'data',
                jsonp: 'jsoncallback',
                timeout: 5000,
                success: function(data, status){

                    var html = '';
                    $.each(data, function(i,item){
                        //html += '<li><a href="#">' + item.bezeichnung_de + '</a></li>';
                        html += '<li><a href="#">' + item.vorname + '</a></li>';
                    });
                    $('#mylist').append($(html));
                    $('#mylist').trigger('create');    
                    $('#mylist').listview('refresh');
                    $('#online-offline').html("Diese Daten wurden online abgerufen");
                    // Daten im LocalStorage als JSON-String speichern
                    localStorage["liste"] = html;
                },
                error: function(){
                    html = ''
                    html = localStorage["liste"];
                    $('#mylist').append($(html));
                    $('#mylist').trigger('create');    
                    $('#mylist').listview('refresh');
                    $('#online-offline').html("Diese Daten wurden offline abgerufen");
                }
            });
        });
        </script>

</head>
<body>

<div data-role="page">
    <div data-role="content">

        <p align="center">Vielen Dank, dass sie den Produktkonfigurator Nutzen!</p>
        <h3 id="online-offline" style="color: red; text-align: center;"></h1>
        <ul data-role="listview" data-inset="true" id="mylist"></ul>

    </div>
</div>

</body>

</html>

结果是所有“Vorname”值的列表。List-html 被保存到本地存储中。如果无法建立连接，则脚本会重用本地保存的 html 来构建列表。连接 -> 新列表无连接 -> 来自本地存储的旧列表

我现在想要的是将整个 JSONP-result-string 保存在 localstorage 中，以便在每次都请求 php 文件的情况下重用它。

我所有的尝试都导致了 [Object] 或“未定义”。我想到的一个解决方案是在 JS 中“重建”JSON-String，但我认为应该有更好的解决方案。

感谢您的回答！

4

1 回答 1

0

我使用以下方法将对象和数组存储在 localStorage 中：

json = [{"id":"1","vorname":"Hallo","nachname":"Bayer","beruf":"Student"},{"id":"10","vorname":"Vorname","nachname":"Nachname","beruf":"Internetseite"}];

    localStorage['json'] = JSON.stringify(json);

这会将数组或对象存储为字符串。然后使用以下命令将字符串返回给 JS 对象或数组：

json = eval("("+localStorage['json']+")");

这与您的 PHP 发送的 JSONP 列表完美配合。我试过了，它现在存储在我的 LocalStorage 中。

于 2013-09-14T17:00:38.223 回答