带有AJAX问题的jQuery提交表单
带有AJAX问题的jQuery提交表单
提问于 2010-08-12 13:26:33
以下是我的jQuery代码：
<script type="text/javascript">
//<!--
$(document).ready(function() {
$('input[type="submit"]').click(function() {
$.ajax({
type: 'POST',
url: $('form').attr('action'),
success: function(data) {
//
}
});
return false;
});
}); //-->
</script>单击submit按钮后，我要做的是：
- 向表单的action属性标识的页面发出AJAX请求(这恰好是与表单相同的php脚本.因此，表单基本上应该提交到同一个页面)。
- 用ajax请求返回的值替换整个页面的HTML。
不过，我不知道该怎么做。在带有表单的页面上没有html或body标记，因为表单正在使用jQuery在另一个页面中被图标化。
那么，如何用HTML返回来替换页面的HTML呢？
这是整个HTML的样子(这很正常，没有html或body标记)：
<form enctype="application/x-www-form-urlencoded" method="post" action="editDocumentQuestion.php?iqid=-5">
<dl>
<dt>
<label for="questionBody">Otázka:</label>
</dt>
<dd style="margin-left: 0;">
<textarea name="questionBody" id="questionBody" rows="4" cols="95" style="border: 1px solid #2278B9; font-family: sans-serif;">Otazka</textarea>
</dd>
<dt style="padding-top: 1em;">
<label for="questionCorrectAnswer">Odpovede:</label>
</dt>
<dd style="margin-left: 0;">
<div class="pad-top">
<div style="margin-right: 1em; float: left;"><input type="radio" name="questionCorrectAnswer" class="questionCorrectAnswer" value="1" checked="checked" />a)</div>
<div style="float: left;"><textarea name="questionAnswer1" id="questionAnswer1" rows="2" cols="88" style="border: 1px solid #2278B9; font-family: sans-serif;">Odpoved a</textarea></div>
<div style="clear: both; height: 0; line-height: 0;"></div>
</div>
<div class="pad-top">
<div style="margin-right: 1em; float: left;"><input type="radio" name="questionCorrectAnswer" class="questionCorrectAnswer" value="2" />b)</div>
<div style="float: left;"><textarea name="questionAnswer2" id="questionAnswer2" rows="2" cols="88" style="border: 1px solid #2278B9; font-family: sans-serif;">Odpoved b</textarea></div>
<div style="clear: both; height: 0; line-height: 0;"></div>
</div>
<div class="pad-top">
<div style="margin-right: 1em; float: left;"><input type="radio" name="questionCorrectAnswer" class="questionCorrectAnswer" value="3" />c)</div>
<div style="float: left;"><textarea name="questionAnswer3" id="questionAnswer3" rows="2" cols="88" style="border: 1px solid #2278B9; font-family: sans-serif;">Odpoved c</textarea></div>
<div style="clear: both; height: 0; line-height: 0;"></div>
</div>
</dd>
<dt>
</dt>
<dd style="margin-left: 24.5em;">
<input type="submit" name="editovatDokumentovuOtazku" id="editovatDokumentovuOtazku" value="Ulož" style="width: 6em; padding: .3em 0;" />
</dd>
</dl>
</form>
<script type="text/javascript">
//<!--
$(document).ready(function() {
$('input[type="submit"]').click(function() {
$.ajax({
type: 'POST',
url: $('form').attr('action'),
success: function(data) {
//
}
});
return false;
});
}); //-->
</script> Stack Overflow用户
发布于 2010-08-12 13:32:45
将整个页面的HTML替换为ajax请求返回的值。
尝试像这样修改您的success处理程序：
success: function(data) {
$('form').after(data).end().remove();
}它所做的是在使用.after(data)和end()的当前表单恢复到表单之后插入ajax数据，最后使用remove()删除表单。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3468109
复制相关文章
相似问题
腾讯云开发者
