6

私がやろうとしているのは、オンライン Web サービスから JSON データを取得して、MySQL データベース内の特定の文字列を検索して見つけ、Javascript を使用して HTML ページに表示することです。

私が苦労しているのは、実際に結果のデータを表示することです。

私の HTML ページの関連する領域は次のようになります。

<form onSubmit="results()">
    <fieldset>
        <label for="area">First digits of postal code:</label>
        <input name="area" type="text" maxlength="4" placeholder="AB12" required />
        <input type="submit" value="Search" name="search" />
    </fieldset>
</form>



<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="cordova-2.3.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">

function results(){
    $.ajax({
        url: 'http://www.foobar.com/cp/index.php?area=AB12',
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        timeout: 5000,
        success: function(data, status){
            $.each(data, function(i,item){
                var place = '<h1>'+item.location+'</h1>'
                + '<p>'+item.id+'</br>';

                output.append(place);
            });
        },
        error: function(){
            output.text('There was an error loading the data.');
        }
    });
};
</script>

<div id="place">
<h3>Places near your location</h3>
</div>

GET データのページはhttp://www.foobar.com/cp/index.phpで、検索変数は「area」です。テストサンプルは ?area=AB12です。

4

2 に答える 2

4

このサービスはJSONオブジェクトをかっこで正しくラップしていないため、JSONPとして機能しないようです。

参照：http ：//www.entertainmentcocktail.com/cp/index.php？area = AB12＆jsoncallback = TEST

それは戻ります：

TEST[{"id":"5","name":"The Red Lion", ... ,"confirmed":"0"}]

それが戻るはずですが：

TEST([{"id":"5","name":"The Red Lion", ... ,"confirmed":"0"}]);

有効なJSONPではないため、使用できません。

アップデート：

コメントからより多くの情報に答える-サーバー側スクリプトを制御している場合は、変更してみてください：

while($row = mysql_fetch_assoc($result)) { $records[] = $row; }
echo $_GET['jsoncallback'] . json_encode($records);

に：

while($row = mysql_fetch_assoc($result)) { $records[] = $row; }
echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';

それが機能するかどうかを確認します。

更新2：

別のコメントに答える。実際にoutput変数を初期化しますか？たとえば、最初に次のようなものを使用します。

var output = $('#place').append('<div/>');

実際に関数を呼び出しますresultsか？次のように呼び出す必要があります。

results();

または、jQueryの方法を使用して、イベントハンドラーとしてどこかに登録します。

$('form').submit(results);

ただし、次を追加します。

return false;

関数の最後に移動してresults、ページが再ロードされないようにします。

このデモを参照してください：http：//jsbin.com/uziyek/1/edit-動作しているようです。

別の問題：

あなたのコードには別の問題があるようです。area=AB12パラメータがURLにハードコードされているということです。代わりに、フォームから値を取得して送信する必要があります。

于 2013-01-23T13:25:08.173 に答える
2

JSONP を正しく実装していません。関数呼び出しを生成する必要があります。つまり、応答はすべきではありfoo(<json here>);ませんfoo<json here>。

修正するのは簡単です：

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

もう 1 つの問題は、フォームの送信を妨げていないことです。つまり、フォームを送信すると、ページが更新されます。それを防がなければなりません。イベント ハンドラーを jQuery にバインドし、インライン イベント ハンドラーを使用しないようにします。

<form id="myForm">

と

$(function() {
    $('#myForm').submit(function(event) {
        event.preventDefault(); // <-- prevent form submission
        // Ajax call here
    });
});

デモ

于 2013-01-23T13:31:06.563 に答える