Question

我有一点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保存在localstorage中。如果无法建立连接，脚本将重用本地保存的html来构建列表。连接 - ＆gt;新名单没有连接 - ＆gt;来自localstorage的旧列表

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

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

感谢您的回答！

Answer 1

我使用以下方法将对象和数组存储在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中。

Ajax / jQuery获得整个JSONP-Result-String

1 个答案: