我正在学习PHP和jQuery。我有一个名为renderPicture.PHP的PHP文件,它在HTMLIMG标记中返回一个动态创建的图像。我想在我的网页上点击事件后更改该图像,而无需重新加载页面。我知道我需要一个jQueryAjax调用来renderPicture。我知道我需要将div的内部HTML设置为jQueryAjax调用的结果。我在这里学习了如何设置内部HTML如何使用jQuery替换div的内部HTML?但我不太确定如何使用AJAX调用来实现这一点。
如何使用jQuery将DIV的内部HTML设置为PHP文件的输出?
以下是jQuery和一些HTML:
<script>
$(document).ready(function(){
$("#myDIV").click(function(){
//var resultOfAjaxCall = $.ajax({ url: './renderPicture.php',});
$("#myDIV").html(resultOfAjaxCall); //This is roughly what I want to do
});
});
</script>
</head>
<div id='myDIV'>
<?php
$cryptinstall="./renderPicture.php";
include $cryptinstall;
?>
</div>
</html>
这是renderpicture.php
<?php
$cryptinstall="./cryptographp.fct.php";
include $cryptinstall;
if(session_id() == "") session_start();
$_SESSION['cryptdir']= dirname($cryptinstall);
$cfg=0;
echo "<img id='cryptogram' src='".$_SESSION['cryptdir']."/cryptographp.php?cfg=".$cfg."&".SID."'>";
ren
?>
使用.load()
:
$(document).ready(function(){
$("#myDIV").click(function(){
$("#myDIV").load('renderPicture.php');
});
});
这是的缩写
$(document).ready(function(){
$("#myDIV").click(function(){
$.ajax({
url: './renderPicture.php',
success: function(resultOfAjaxCall) {
$("#myDIV").html(resultOfAjaxCall);
}
});
});
});
每当您想对AJAX调用的结果执行某些操作时,都必须在回调函数中执行。
如果我猜对了,你需要load()
从服务器加载数据,并将返回的HTML放入匹配的元素中。
$("#myDIV").load('qualifiedFilePath');
使用jQuery.get()
发出ajax请求。
$.get('ajax/test.html', function(data) {
$('#myDIV').html(data);
alert('Load was performed.');
});