如何使用 AJAX 打开 DIV 标记内的 URL
How can I open a URL inside a DIV tag using AJAX?
我有以下php文件。一个从简单窗体捕获用户的文本,另一个回显此文本。文件如下所示。
文件1.php:
<form action="output.php" method="post">
Paste text document: <br><br>
<textarea name="doc" rows="5" cols="50" value="">
</textarea><br><br>
<input type="submit" name="submit" value="submit">
<input type="reset" name="reset" value="Clear">
</form>
<br><br>
<div id="output_area">
</div>
</body>
</html>
输出.php:
<html lang="en">
<head><title>Output</title></head>
<body>
<?php
$doc = $_POST['doc'];
echo $doc;
?>
</body>
</html>
我希望输出显示在 DIV 标签之间,而不是在新页面上加载和显示输出。我希望在同一页面上的 DIV 标签之间输出文本。也许最好的方法是使用 AJAX 在 DIV 标签中显示输出.php并在用户单击"提交"按钮后输出文本。如何使用 AJAX 以最基本的方式执行此操作?
您可以使用 JQuery ajax 函数:
JQuery:
$("form").on("submit", function(event){
event.preventDefault();
$.ajax({
type: "POST",
url: "output.php",
data: { doc: $('#doc').val()}
})
.done(function( data) {
$("#output_area").html(data);
});
});
更改网页:
<textarea name="doc" id="doc" rows="5" cols="50" value=""></textarea>
您可以使用
以下函数:
$(document).ready(function() {
$( "#output_area" ).load( "output.php" );
});
但请记住!jquery 的 load 函数会在您请求的页面上加载所有内容,因此不要使用:
<html lang="en">
<head><title>Output</title></head>
<body>
</body>
</html>
现在 load(函数)将放入你在输出中制作的 PHP.php
如果您想在提交时输出答案,我会这样做:
首先添加:
<a href="#" name="submit" class="pressme">Show doc</a>
然后添加 jquery:
$(document).ready(function() {
$('.pressme').on('click', function(){
var yourdata = $(this).parent().find("textarea[name='doc']").val();
$.ajax({
type: "POST",
url: "output.php",
data: {doc: yourdata},
success: function(data) {
$('#output_area').html(data);
});
});
});
我添加了一个<a>
,而不是使用<input type="submit">
,因为提交,将发布表单,这不是您需要的,在我了解之后,您需要在div中预览文本区域。
希望对您有所帮助!
如果您希望
$_POST
变量显示在同一页面上,则
1.更改表单的操作。在您的情况下 action="file1.php"
或将其留空以在提交时重新加载页面(在HTML5中无效)
2.将回声部分直接插入您的div
<div id="output_area">
<?php
echo $_POST['doc'];
?>
</div>
不在另一个文件中
你不需要为此使用 ajax。你可以通过使用javascript来做到这一点。它将提高您的代码性能。试试这个:
<script>
function show() {
document.getElementById("output_area").innerHTML=document.getElementById("doc").value;
return false;
}
</script>
<form action="#" method="post">
<textarea name="doc" id="doc" rows="5" cols="50" value="">
</textarea>
<input type="submit" name="submit" value="submit" onclick="return show();">
<input type="reset" name="reset" value="Clear">
</form>
<div id="output_area"></div>
</body>
</html>
相关文章:
- 我想使用hashbang URL(blah.com/#!/thingtoload)动态加载页面内容(在DIV中),我有j
- 从 URL 中获取 DIV 哈希
- 如何使用JQuery.Load访问Div中加载URL的UL“id”,“name”等,以设置JQuery树视图
- 跟踪 URL 中的 Div 导航路径
- 获取 DIV 中的文本/URL
- 悬停打开 DIV 时,DIV 内容应从单独的 URL 动态加载
- Div 叠加层淡入历史记录,并可使用哈希 URL 添加书签
- 如何使用 AJAX 打开 DIV 标记内的 URL
- JQuery-DIV内容更改应该是另一个URL
- 替换DIV中的所有url
- 在隐藏特定DIV和更新url之前,为循环预加载图像
- 如果用户使用URL查询,只显示DIV
- 在Wordpress中基于Url隐藏菜单Div类
- 加载图像后,只有鼠标悬停在URL(使用DIV标签)
- 传递所选DIV的ID到下一个PHP页面,没有表单或URL变量
- 用URL在DIV中展开DIV
- 更改位于具有ID的DIV中的图像的URL
- 从TEXT BOX中获得的url加载DIV中的图像
- 在 DIV 中打开生成的 URL
- 如何使用$.ajax()函数从搜索栏中获取URL并在DIV中显示HTML响应