Forms 使用jQuery Mobile的Ajax请求，无需页面刷新

我通过ajaxpost提交了一个简单的表单，得到了一个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" />

我的滑块代码如下所示：

<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" />

---

我修改了您的代码，如下所示，页面未刷新：

$(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>

$（文档）.on（'submit'，'myForm'，函数（e）{
e、 预防默认值（）；
postForm（）；
});
函数postForm（）
{
$.ajax({
类型：$（'form'）.attr（'method'），
url:$（'forminput[name=action]'）。attr（'value'），
数据：$（'form'）。序列化（），
数据类型：“json”，
async:true，
成功：功能（数据）{
mediaSource=response.url；
},
错误：函数（xhr、ajaxOptions、thrownError）{
警报（“错误：+xhr.status+”\n”+
消息：“+xhr.statusText+”\n+
“响应：”+xhr.responseText+“\n”+thrownError）；
}
});
}

我修改了您的代码，如下所示，页面不刷新：

$(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>

$（文档）.on（'submit'，'myForm'，函数（e）{
e、 预防默认值（）；
postForm（）；
});
函数postForm（）
{
$.ajax({
类型：$（'form'）.attr（'method'），
url:$（'forminput[name=action]'）。attr（'value'），
数据：$（'form'）。序列化（），
数据类型：“json”，
async:true，
成功：功能（数据）{
mediaSource=response.url；
},
错误：函数（xhr、ajaxOptions、thrownError）{
警报（“错误：+xhr.status+”\n”+
消息：“+xhr.statusText+”\n+
“响应：”+xhr.responseText+“\n”+thrownError）；
}
});
}

您需要使用

返回false或
e.preventDefault（）在单击事件中停止表单默认行为（提交）。您需要使用
返回false或
e.preventDefault（）在您的单击事件中，以阻止表单默认行为（提交）的发生。谢谢您，先生，当您单击按钮时，该操作非常有效，但当我按键盘上的enter键时，它仍会刷新页面。有什么想法吗？我更新了我的帖子，这样即使在键盘上点击回车键，页面也不会刷新。如果答案符合你的需要，你能接受吗？谢谢。更新后的方法正是我所需要的。再次感谢！谢谢你，先生，当你点击按钮时效果很好，但是当我按键盘上的enter键时，它仍然会刷新页面。有什么想法吗？我更新了我的帖子，这样即使在键盘上点击回车键，页面也不会刷新。如果答案符合你的需要，你能接受吗？谢谢。更新后的方法正是我所需要的。再次感谢！