1

Ajax POST を介して単純なフォームを送信し、JSON 応答を取得し、その応答を使用して、スライダー付きのカスタム ビルドのオーディオ プレーヤーにデータを取り込みます。

オーディオ プレーヤーのスライダー関数は、Ajax POST の前に機能します。しかし、フォームを送信した後、jQuery Mobile がページを更新しているように見え、その更新後にスライダーが壊れています。

私が得るエラーメッセージは次のとおりです。

私のフォームコードは次のようになります:

<form name="test" method="post">
    <input type="hidden" name="action" value="test.php">
    <input type="number" name="id" />
    <button data-icon="star" onclick="onFormSumbit();">Submit</button>
</form>

そして、私の送信機能は次のようになります。

function onFormSumbit() {
    $.ajax({
        type: $('form').attr('method'),
        url: $('form input[name=action]').attr('value'),
        data: $('form').serialize(),
        dataType: 'json',
        success: function(response, textStatus, XMLHttpRequest) {
            if (response.error) {
                console.log('ERROR: ' + response.error);                
            } else {
                mediaSource = response.url;                 
                console.log('URL: ' + response.url);
                console.log('ARTIST: ' + response.artist);
                console.log('TITLE: ' + response.title);
            }
        }
    });
}

私のスライダーコードは次のようになります。

<input type="range" id="slider" value="0" min="0" max="100" step="0.01" data-highlight="true" />

そして、私のスライダー関数は次のようになります:

playSlider.on('slidestop', function(event,ui) {
    mediaObject.seekTo((playSlider.val() / 100) * mediaDuration * 1000);
    console.log(playSlider.val());
});
4

1 に答える 1

5

コードを次のように変更しましたが、ページが更新されません:

$(document).on('submit', '#myForm', function(e) {
    e.preventDefault();
    postForm();
});

function postForm()
{
    $.ajax({
        type: $('form').attr('method'),
        url: $('form input[name=action]').attr('value'),
        data: $('form').serialize(),
        dataType: 'json',
        async: true,
        success: function(data) {
            mediaSource = response.url;                
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("Error: " + xhr.status + "\n" +
                   "Message: " + xhr.statusText + "\n" +
                   "Response: " + xhr.responseText + "\n" + thrownError);
        }
    });
}

<form name="test" id="myForm" method="post">
   <input type="hidden" name="action" value="test.php">
   <input type="number" name="id"/>
   <input type="submit" data-icon="star" value="Submit">
</form>
于 2012-08-26T11:07:24.303 に答える