How do I change inner HTML of a DIV to the output of a PHP file using jQuery
我正在学习php和jquery。我有一个名为renderpicture.php的php文件,它返回一个HTML img标记中动态创建的图像。我想在我的网页上单击事件之后更改那个图像——而不需要重新加载页面。我知道我需要一个jQueryAjax调用来呈现图片。我知道我需要将DIV的内部HTML设置为jquery ajax调用的结果。我在这里学习了如何设置内部HTML,如何使用jquery替换DIV的innerHTML?但我不太确定如何使用Ajax调用来实现这一点。
如何使用jquery将DIV的内部HTML设置为PHP文件的输出?
以下是jquery和一些HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $(document).ready(function(){ $("#myDIV").click(function(){ //var resultOfAjaxCall = $.ajax({ url: './renderPicture.php',}); $("#myDIV").html(resultOfAjaxCall); //This is roughly what I want to do }); }); </head> <?php $cryptinstall="./renderPicture.php"; include $cryptinstall; ?> </html> |
这是renderpicture.php
1 2 3 4 5 6 7 8 9 10 | <?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 ?> |
使用
1 2 3 4 5 | $(document).ready(function(){ $("#myDIV").click(function(){ $("#myDIV").load('renderPicture.php'); }); }); |
以下简称:
1 2 3 4 5 6 7 8 9 10 | $(document).ready(function(){ $("#myDIV").click(function(){ $.ajax({ url: './renderPicture.php', success: function(resultOfAjaxCall) { $("#myDIV").html(resultOfAjaxCall); } }); }); }); |
每当您想对Ajax调用的结果做一些事情时,都必须在回调函数中进行。
使用
1 2 3 4 | $.get('ajax/test.html', function(data) { $('#myDIV').html(data); alert('Load was performed.'); }); |
如果我猜对了,你需要加载()。
Load data from the server and place the returned HTML into the matched element.
1 | $("#myDIV").load('qualifiedFilePath'); |