您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
怎么在php中利用jQuery与Ajax实现一个页面异步刷新功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
代码如下
<html> <head> <meta charset="UTF-8"> <title>JQueryAjax+PHP</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script> </head> <body> 用户名:<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(); $.post('ajax.php',{name:username,pwd:password},function(data) { alert(data); $(".con").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="https://code.jquery.com/jquery-3.0.0.min.js"></script> </head> <body> 用户名:<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方式是必须的 ?>
关于怎么在php中利用jQuery与Ajax实现一个页面异步刷新功能问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。