0

javascriptを使用してJSON形式のデータを受け取るHTMLでWebサイトを作成しようとしていますが、そのデータをWebサイトに挿入します。

問題は、エラーが見つからないことです。このコード例を使用しました。Web サーバーから HTML にデータを取得するには。上記のリンクの例を使用して、データベースへの接続を確立しました。しかし、その既存のコードをこの例に移動したいと思いました。

上記の例では、データをフェッチし、データをフェッチする JavaScript ファイルに割り当てられているものidと同じa で div を作成する JavaScript ファイルをリンクしました。idしかし、それはまったく機能しません。divデータで満たされているのは空です。

fetch.js

$(document).ready(function(){
    var output = $('#output');

    $.ajax({
        url: 'http://samcroft.co.uk/demos/updated-load-data-into-phonegap/landmarks.php',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        timeout: 5000,
        success: function(data, status){
            $.each(data, function(i,item){ 
                var landmark = '<h1>'+item.name+'</h1>'
                + '<p>'+item.latitude+'<br>'
                + item.longitude+'</p>';

                output.append(landmark);
            });
        },
        error: function(){
            output.text('There was an error loading the data.')
        }
    });
});

これはライブ デモです。コードは Web サーバー上でオンラインになっているときに読み込まれます。ただし、ローカルの場合はそうではありません。これは何が原因ですか？

http://codele.se/app/flip/debatt.html

4

5 に答える 5

1

サイトで firebug を使用すると、次のように html に更新されたデータが含まれていることがわかりました。

コード

問題は、サイトからこのコード行を削除する際に背景画像を非表示にする背景画像を使用していることです。

<div style="z-index: 3; left: 512px; transform: rotateY(0deg);" class="page cover">

私はこの出力を得ます：

出力

よく見てみると、html に同じ ID 出力を持つ 2 つの div があることがわかったので、1 つの div だけがoutputid bcoz ID を持っていることを確認して、html で一意にする必要があります。

エラー

于 2013-01-14T13:46:26.683 に答える
1

ファイルと http を混在させるのは、セキュリティ ルールが強化されているため好ましくありません。ここに問題があると感じています。Chrome を起動すると、セキュリティ ルールの厳格さが緩和されます。

試す

chrome.exe -–allow-file-access-from-files

また

chrome.exe --disable-web-security

またはキオスクモード

chrome.exe  --enable-kiosk-mode
于 2013-01-14T13:38:11.743 に答える
0

このコードが正しく機能しない場合は、何か他のことが起こっているに違いありません。この JSFiddle に従って、コードは正常に動作します。

HTML にの id を持つ div があるoutputこと、および実際にページにスクリプトが含まれていることfetch.jsを確認してください。ブラウザーの開発者ツールの JS コンソールで、他のエラーがないか確認してください。

編集: CSS 画像の配置とh1タグ属性が原因で、データが正しく表示されません。CSS でを変更するh1とh2、ヘッダー (「Big Ben」など) が正しく表示されます。ただし、 div にはスクロールがなくoutput、画像の divimg-cont img-1と divfrontが一部を覆っているためoutput、テキスト全体が表示されることはありません。

これは CSS/レイアウトの問題であり、Javascript の問題ではありません。CSS を修正します。

于 2013-01-14T13:14:05.853 に答える
0

別のドメインのサーバーからデータを要求する方法である JSONP を実装しようとしています。データ ソース (通常は Web サービス) は、その応答を関数呼び出しでラップするように指示する必要があります。データ ソースが応答をラップしていない場合、ローカルでは動作しますが、ライブ環境にデプロイされた場合、クライアントは応答を受信できません。

コントロールできる場合、またはデータ ソース関数を変更できる場合にできることを次に示します。(そうでない場合、JSONP を実装することは不可能です)。この例のデータ ソースは REST サービスです。

//データ ソース (REST サービス)

 [WebGet(UriTemplate = "getdata?callback={callback}&testParam1={p1}&testParam2={p2}")]
    public void GetData(string testParam1, string testParam2, string callback)
    {
        //Callback method is one of the parameters
        WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
        var data = _db.GetRecords(testParam1, testParam2);
        //wrap the response 
        HttpContext.Current.Response.Write(string.Format("{0}( {{ result:\"{1}\"}} )", callback, data));
    }

//クライアントの実装

function GetMainMarket(holder, template, testParam1, testParam2) {
$.ajax({
    type: 'GET',
    url: 'http://localhost:2520/DataServices/getdata',
    data: { testParam1: 'test1', testParam2: 'test2' },
    dataType: 'jsonp',
    success: function (data) {
        eval(data.result);
        var output = $(template).parseTemplate(json);
        $('#' + holder).html(output);
    }
});

};

于 2013-01-14T13:28:37.987 に答える
0

Firebug (またはその他のブラウザー開発者ツール)を使用してみてください。Firebug コンソールで、サーバーから受信したエラーとデータを確認してください。

編集：わかりました。JS コードを投稿しました。あなたのコードは問題ないようです。サーバーからのデータを受信します。これを実行しても何も表示されない場合。おそらく、HTML の形式が正しくありません。ページに id="output" を持つ div 要素またはその他のものはありますか?

于 2013-01-14T13:05:13.583 に答える