如何用php+ajax实现页面的局部刷新?
是这样的:比如有一块div,里边是用户的评论,然后在div的上面有一个评论框,在评论框中输入评论信息以后会自动插入数据库,然后下边的div中也会自动显示用户的评论。就是需要实现这样的一个功能,一开始想着是让整个页面自动刷新,这样是能实现功能,但是这样太不友好了,浪费时间需要加载整个页面。所以想实现只刷新div里面的内容,网页其他的地方不用刷新。可以不用ajax实现也可以用js,,但是不会啊,,哪位高人帮帮忙啊?
回复讨论(解决方案)
用户完后完成输入提交,如果成功,就把提交的内容追加到评论列表。
具体可以查看ajax使用,以及与php交互。
你到网上搜下,ajax异步提交数据,很多案例的,或者直接到jquery官网看使用方法
要刷新的页面
1 | <script src= "jquery.min.js" type= "text/javascript" ></script><script>$( function (){ $( "#reload" ).click( function (){ $.ajax({ type: "POST" , url: "reload.php" , success: function (msg){ if (msg) { $( "#div1" ).html(msg); } } }); });});</script> <BODY> <div id= "div1" style= "float:left;width:400px;line-height:30px;margin:100px auto;" >从前有座山!</div> <div style= "width:100px;height:100px;" ><input type= "button" name= "reload" id= "reload" value= "刷新" /></div> </BODY>
|
登入後複製
reload.php页面
只是这么个简单例子。
client.html
1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ><html> <head> <meta http-equiv= "content-type" content= "text/html; charset=utf-8" > <title> jquery demo </title> <script src= "//code.jquery.com/jquery-1.11.0.min.js" ></script> <script type= "text/javascript" > function show(){ $.get( "server.php" , function (data) { $( '#txt' ).html(data.content); }, "json" ); } </script> </head> <body> <p>??不?被刷新</p> <div id= "txt" >原??容</div> <input type= "button" value= "刷新?容" onclick= "show()" > </body></html>
|
登入後複製
server.php 1 | <?php $ret = array (); $ret [ 'content' ] = '新?容' ; echo json_encode( $ret );?>
|
登入後複製