Question

所以基本上，当我从服务器脚本（retrieve.php）加载数据时，它会使用$（＆＃39;＃results＆＃39;）。html（data）显示在showlist.html中。但每当我尝试加载我的listview或selectbox与该数据..没有任何反应。请告知我可能做错了什么

// SERVER-SIDE SCRIPT - retrieve.php

<?php

     $pdo = new PDO('mysql:host=localhost;dbname=sports_rush;charset=utf8', 'root', '');
     $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    try {

      $query = "SELECT eid,event_title FROM event_table";
      $result = $pdo->prepare($query);
      $result->execute();
     while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
       echo json_encode($row);
    }
   $db_connection = null;
     } catch (PDOException $e) {
       echo $e->getMessage();
   }
//I found this recursive function online to enable me force convert to UTF-8 all the strings contained in an array
function utf8ize($d) {
if (is_array($d)) {
    foreach ($d as $k => $v) {
        $d[$k] = utf8ize($v);
    }
} else {
    return utf8_encode($d);
}
return $d;
}
?>

//FILE THAT SHOWS MY DATA FROM SERVER-SIDE SCRIPT - Showlist.html
<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title>SHOW LIST</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css"/>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.4.2.min.css" />
<script src="jquery-mobile/jquery-1.9.1.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.4.2.min.js"></script>
</head> 
<body> 

<div data-role="page" id="home_page">
<div data-role="header" data-theme="a">
<h1>Header</h1>

</div>
<div data-role="content">
<select name="zip" id="zip" onChange="initializeRetrieve()"></select>
<div id="result"></div>
<ul data-role="listview" data-inset="true" id="postallist"></ul>
</div>
</div>
<script>
$(function(){       
 $.ajax({
 url     :   'retrieve.php',
 type    :   "POST",
 success :   function(data){
 var output = '';
 $('#result').html(data);  //This is just a test to see my data
 $.each(data, function (index, value) {
output += '<li><a href="#">' + value.eid + '</a></li>';
});
$('#postallist').html(output).listview("refresh");
}
});
});

function initializeRetrieve(){
var $select5 = $('#zip');
//request the JSON data and parse into the select element
$.getJSON("retrieve.php", function(data){

//iterate over the data and append a select option where eid is in the json file
$.each(data, function(key, value){
$select5.append('<option>' + value.eid + '</option>');
});
});
}
</script>
</body>
</html>

Answer 1

您是否尝试过使用GET方法

Answer 2

尝试将您的请求发送到$（document）.ready

 $(document).ready(function(){
    $.getJSON('retrieve.php', function(data) {
       $('#result').html(data);
    })
});

Answer 3

//最后工作。问题发生在我的showlist.html中。我的页面打开时需要更改初始化

<html>
<meta charset="utf-8" />
<title>SHOW LIST</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
    <div data-role="header" data-position="fixed">
       <h1>Sports Rush Events</h1>
    </div>

    <div data-role = "content">
          <div class="content-primary">
             <ul id="list" data-role="listview" data-filter="true"></ul>
          </div>
           <div id="result"></div>
    </div>

<script type="text/javascript">
$(document).on('pagebeforeshow', '#index', function(){ 
$.ajax({
url     :   'retrievelist.php',
type    :   "POST",
dataType: 'json',
success : function(data){
$.each(data,function(i,dat){
$("#list").append("<li><b>ID: </b>"+i+"</br><b> Name: </b>"+dat.event_title+"</li>");
                 });
$("#list").listview('refresh');
}
     });
         });
    </script>
    <div data-role="footer" data-position="fixed">
    </div>
</div>

每当我尝试将我的JSON数据加载到listview或选择菜单时，都不会显示任何内容

3 个答案: