我通过 Ajax POST 提交一个简单的表单并获取 JSON 响应,并使用该响应将数据填充到带有 slider 的自定义音频播放器中。
音频播放器 slider 功能在 Ajax POST 之前工作。但是,在我提交表单后,jQuery Mobile 似乎正在刷新页面,刷新后, slider 损坏了。
我收到的错误消息是:“错误:在初始化之前无法调用 slider 上的方法;尝试调用方法‘刷新’”
我的表单代码如下所示:
<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);
}
}
});
}
我的 slider 编码如下:
<input type="range" id="slider" value="0" min="0" max="100" step="0.01" data-highlight="true" />
我的 slider 函数如下所示:
playSlider.on('slidestop', function(event,ui) {
mediaObject.seekTo((playSlider.val() / 100) * mediaDuration * 1000);
console.log(playSlider.val());
});
最佳答案
我将您的代码修改如下,但页面未刷新:
$(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>
关于forms - 使用 jQuery Mobile 进行 Ajax 请求,无需刷新页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12129137/