我的结果代码有问题。 firefox中的firebug提到TypeError:loaddata为null为错误。这是我的代码:
detail.html
<!DOCTYPE html>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TelkomVision Mobile</title>
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.1.min.css">
<link rel="stylesheet" href="demo/css/jqm-demos.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="demo/js/jquery.mobile.demos.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="javascript/detail_pemasok.js"></script>
</head>
<body>
<div id="detail_pemasok_page" data-role="page" class="jqm-demos">
<div data-role="header" data-position="fixed">
<a href="datapemasok.html" data-ajax="false" data-icon="arrow-l" data-theme="b" data-transition="slide">Back</a>
<h1>Detail News</h1>
</div>
<div data-role="content">
<div id="loading_panel" style="display:none;text-align:center;">
<b>Please Waiting...!</b>
<br><br>
<div class="progress progress-striped active">
<div class="bar" style="width: 100%;"></div>
</div>
</div>
<div id="not_found" style="display:none;text-align:center;color:#F00;">
<div class="alert alert-danger">
<strong>Data not found...! Please try again</strong>
</div>
<br><br><br>
<a href="index.html" data-role="button" data-inline="true" data-icon="check" data-theme="b" data-ajax="false">Back</a>
</div>
<div id="conn_failed" style="display:none;text-align:center;color:#F00;">
<div class="alert alert-danger">
<strong>Connection Failed...! Please try again</strong>
</div>
<br><br><br>
<a href="index.html" data-role="button" data-inline="true" data-icon="check" data-theme="b" data-ajax="false">Back</a>
</div>
<div id="allData" style="display:none;">
<p style="font-weight:bold;">Nama Perusahaan : </p>
<div id="nama_perusahaan" class="alert alert-info"></div>
<p style="font-weight:bold;">Alamat : </p>
<div id="alamat" class="alert alert-info"></div>
<p style="font-weight:bold;">Telepon : </p>
<div id="telp" class="alert alert-info"></div>
<p style="font-weight:bold;">Kodepos : </p>
<div id="kodepos" class="alert alert-info"></div>
<p style="font-weight:bold;">Nama Direksi : </p>
<div id="nama_direksi" class="alert alert-info"></div>
<p style="font-weight:bold;">Nilai Saham : </p>
<div id="nilai_saham" class="alert alert-info"></div>
<p style="font-weight:bold;">Nama Stakeholder : </p>
<div id="nama_stakeholder" class="alert alert-info"></div>
<p style="font-weight:bold;">Pekerjaan Stakeholder : </p>
<div id="pekerjaan_stakeholder" class="alert alert-info"></div>
<p style="font-weight:bold;">Kewarganegaraan Stakeholder : </p>
<div id="kewarganegaraan_stakeholder" class="alert alert-info"></div>
<p style="font-weight:bold;">Alamat Stakeholder : </p>
<div id="alamat_stakeholder" class="alert alert-info"></div>
<p style="font-weight:bold;">Komoditas : </p>
<div id="komoditas" class="alert alert-info"></div>
<p style="font-weight:bold;">Lokasi : </p>
<div id="lokasi" class="alert alert-info"></div>
<p style="font-weight:bold;">Desa : </p>
<div id="desa" class="alert alert-info"></div>
<p style="font-weight:bold;">Kecamatan : </p>
<div id="kecamatan" class="alert alert-info"></div>
<p style="font-weight:bold;">Kabupaten / Kota : </p>
<div id="kabkota" class="alert alert-info"></div>
<p style="font-weight:bold;">Provinsi : </p>
<div id="prov" class="alert alert-info"></div>
<p style="font-weight:bold;">Luas (Ha) : </p>
<div id="luas" class="alert alert-info"></div>
<p style="font-weight:bold;">Jangka Waktu Penyelidikan : </p>
<div id="jangka_wkt_p" class="alert alert-info"></div>
<p style="font-weight:bold;">Jangka Waktu Ekspedisi : </p>
<div id="jangka_wkt_eks" class="alert alert-info"></div>
<p style="font-weight:bold;">Jangka Waktu Studi : </p>
<div id="jangka_wkt_studi" class="alert alert-info"></div>
<p style="font-weight:bold;">Status Pemasok : </p>
<div id="status_pemasok" class="alert alert-info"></div>
<p style="font-weight:bold;">Tanggal Pengesahan : </p>
<div id="tgl_pengesahan" class="alert alert-error" style="text-align:left;"></div>
</div>
</div><!-- /content -->
<div data-role="panel" class="jqm-nav-panel jqm-navmenu-panel" data-position="left" data-display="reveal" data-theme="c">
<ul data-role="listview" data-theme="d" data-divider-theme="a" class="jqm-list">
<li data-role="list-divider">TelkomVision Menu</li>
<li><a href=".html" data-ajax="false" data-rel="page" data-transition="slide" data-inline="true"><img src="css/menu/search.png" class="ui-li-icon ui-corner-none">Login</a></li>
<li><a href=".html" data-ajax="false" data-rel="page" data-transition="slide" data-inline="true"><img src="css/menu/search.png" class="ui-li-icon ui-corner-none">Data Pemasok</a></li>
<li><a href="addpemasok.html" data-ajax="false" data-rel="page" data-transition="slide" data-inline="true"><img src="css/menu/search.png" class="ui-li-icon ui-corner-none">Tambah Data Pemasok</a></li>
<li><a href="promo.html" data-ajax="false" data-rel="page" data-transition="slide" data-inline="true"><img src="css/menu/promo.png" class="ui-li-icon ui-corner-none">Update Data Pemasok</a></li>
</ul>
</div><!-- /panel -->
</div><!-- /page -->
</body>
</html>
这是js脚本:
$(document).ready(function() {
$('#loading_panel').show();
var noIup = getUrlVars()["no_iup"];
var serviceURL = "http://localhost:81/testmobile/php/";
$.ajax({
type : 'GET',
url : serviceURL + 'detail_pemasok.php?no_iup='+noIup,
async: true,
beforeSend: function(x) {
if(x && x.overrideMimeType) {
x.overrideMimeType("application/j-son;charset=UTF-8");
}
},
dataType : 'json',
success : function(data){
var GetData = data.item;
if(GetData==''){
$('#loading_panel').hide();
$('#not_found').show();
}else{
$('#loading_panel').hide();
$('#allData').show();
$.each(GetData, function(index, loaddata) {
var Nama_perusahaan = loaddata.nama_perusahaan;
var Alamat = loaddata.alamat;
var Telp = loaddata.telp;
var Kodepos = loaddata.kodepos;
var Nama_direksi = loaddata.nama_direksi;
var Nilai_saham = loaddata.nilai_saham;
var Nama_stakeholder = loaddata.nama_stakeholder;
var Pekerjaan_stakeholder = loaddata.pekerjaan_stakeholder;
var Kewarganegaraan_stakeholder = loaddata.kewarganegaraan_stakeholder;
var Alamat_stakeholder = loaddata.alamat_stakeholder;
var Komoditas = loaddata.komoditas;
var Lokasi = loaddata.lokasi;
var Desa = loaddata.desa;
var Kecamatan = loaddata.kecamatan;
var Kabkota = loaddata.kabkota;
var Prov = loaddata.prov;
var Luas = loaddata.luas;
var Jangka_wkt_p = loaddata.jangka_wkt_p;
var Jangka_wkt_eks = loaddata.jangka_wkt_eks;
var Jangka_wkt_studi = loaddata.jangka_wkt_studi;
var Status_pemasok = loaddata.status_pemasok;
var Tgl_pengesahan = loaddata.tgl_pengesahan;
$('#nama_perusahaan').text(nama_perusahaan);
$('#alamat').text(alamat);
$('#telp').text(telp);
$('#kodepos').text(kodepos);
$('#nama_direksi').text(nama_direksi);
$('#nilai_saham').text(nilai_saham);
$('#nama_stakeholder').text(nama_stakeholder);
$('#pekerjaan_stakeholder').text(pekerjaan_stakeholder);
$('#alamat_stakeholder').text(alamat_stakeholder);
$('#komoditas').text(komoditas);
$('#lokasi').text(lokasi);
$('#desa').text(desa);
$('#kecamatan').text(kecamatan);
$('#kabkota').text(kabkota);
$('#prov').text(prov);
$('#luas').text(luas);
$('#jangka_wkt_p').text(jangka_wkt_p);
$('#jangka_wkt_eks').text(jangka_wkt_eks);
$('#jangka_wkt_studi').text(jangka_wkt_studi);
$('#status_pemasok').text(status_pemasok);
$('#tgl_pengesahan').text(tgl_pengesahan);
});
}
},
error : function(){
$('#loading_panel').hide();
$('#conn_failed').show();
}
});
});
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
答案 0 :(得分:1)
在评论中你说过从Ajax调用返回的数据是
Object { nama_perusahaan="1", alamat="1", telp=null, more...}
并且你正在循环它就像它是一个数组,实际上你正在循环对象中的键。
$.each(GetData, function(index, loaddata) {
var Nama_perusahaan = loaddata.nama_perusahaan;
var Alamat = loaddata.alamat;
那是错的!如果你在每个内部添加了console.log(loaddata)行,你会看到
> "1"
> "1"
> null
> ERROR
为了使您的代码正常工作,您的JSON需要看起来像
[{ nama_perusahaan:"1", alamat:"1", telp:null}]
要使代码正常工作,请删除每个代码并仅引用对象的属性。
var loaddata = GetData;
var Nama_perusahaan = loaddata.nama_perusahaan;
var Alamat = loaddata.alamat;