php+jQuery+Ajax简单实现页面异步刷新
2018-09-07 17:39
页面显示如下：
JQueryAjax.html中的代码如下（用的较为简单的$.post）
<html> <head> <meta charset=UTF-8> <title>JQueryAjax+PHP</title> <script type=text/javascript src=用户名:<input type=text id=username name=username /><br> 密码:<input type=password id=password name=password /><br> <button type=button class=butn>ajax提交).html(data); }) }) }) </script> </body> </html>
ajax.php
<?php echo 用户名:,$_POST[name],,密码：,$_POST[pwd].<br>; //这里可以进行一些操作，比如数据库交互 echo 操作完毕; ?>
在非json格式下，后台只能返回字符串，如果想后台返回数组，可以采用json格式
例如将JQueryAjax中的代码修改为如下形式：
<html> <head> <meta charset=UTF-8> <title>JQueryAjax+PHP</title> <script type=text/javascript src=用户名:<input type=text id=username name=username /><br> 密码:<input type=password id=password name=password /><br> <button type=button class=butn>ajax提交</button><br> <span class=con></span> <script type=text/javascript> $(document).ready(function(){ $(.butn).click(function(){ var username = $(#username).val(); var password = $(#password).val(); $.ajax({ url: ajax.php, type: POST, data:{name:username,pwd:password}, dataType: json, error: function(){ alert(Error loading XML document); }, success: function(data,status){//如果调用php成功 alert(status); alert(data); $(.con).html(用户名:+data[0]+密码:+data[1]); } }); }) }) </script> </body> </html>
ajax.php
<?php $name = $_POST[name]; $pwd = $_POST[pwd]; $array = array($name,$pwd); //这里进行一个些操作，比如数据库交互 echo json_encode($array);//json_encode方式是必须的 ?>
运行效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。