页面显示如下：

JQueryAjax.html中的代码如下（用的较为简单的$.post）

  1. <html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>JQueryAjax+PHP</title>
  5. <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  6. </head>
  7. <body>
  8. 用户名:<input type="text" id="username" name="username" /><br>
  9. 密码:<input type="password" id="password" name="password" /><br>
  10. <button type="button" class="butn">ajax提交</button><br>
  11. <span class="con"></span>
  12. <script type="text/javascript">
  13. $(document).ready(function(){
  14. $(".butn").click(function(){
  15. var username = $("#username").val();
  16. var password = $("#password").val();
  17. $.post('ajax.php',{name:username,pwd:password},function(data) {
  18. alert(data);
  19. $(".con").html(data);
  20. })
  21. })
  22. })
  23. </script>
  24. </body>
  25. </html>
<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：

  1. ajax.php
  2. <?php
  3. echo '用户名:',$_POST['name'],',密码：',$_POST['pwd']."<br>";
  4. //这里可以进行一些操作，比如数据库交互
  5. echo "操作完毕";
  6. ?>
ajax.php

<?php

echo '用户名:',$_POST['name'],',密码：',$_POST['pwd']."<br>";

//这里可以进行一些操作，比如数据库交互

echo "操作完毕";

?>

在非json格式下，后台只能返回字符串，如果想后台返回数组，可以采用json格式

例如将JQueryAjax中的代码修改为如下形式：

  1. <html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>JQueryAjax+PHP</title>
  5. <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  6. </head>
  7. <body>
  8. 用户名:<input type="text" id="username" name="username" /><br>
  9. 密码:<input type="password" id="password" name="password" /><br>
  10. <button type="button" class="butn">ajax提交</button><br>
  11. <span class="con"></span>
  12. <script type="text/javascript">
  13. $(document).ready(function(){
  14. $(".butn").click(function(){
  15. var username = $("#username").val();
  16. var password = $("#password").val();
  17. $.ajax({
  18. url: "ajax.php",
  19. type: "POST",
  20. data:{name:username,pwd:password},
  21. dataType: "json",
  22. error: function(){
  23. alert('Error loading XML document');
  24. },
  25. success: function(data,status){//如果调用php成功
  26. alert(status);
  27. alert(data);
  28. $('.con').html("用户名:"+data[0]+"密码:"+data[1]);
  29. }
  30. });
  31. })
  32. })
  33. </script>
  34. </body>
  35. </html>
<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

  1. <?php
  2. $name = $_POST['name'];
  3. $pwd = $_POST['pwd'];
  4. $array = array("$name","$pwd");
  5. //这里进行一个些操作，比如数据库交互
  6. echo json_encode($array);//json_encode方式是必须的
  7. ?>
<?php

$name = $_POST['name'];

$pwd = $_POST['pwd'];

$array = array("$name","$pwd");

//这里进行一个些操作，比如数据库交互

echo json_encode($array);//json_encode方式是必须的

?>

运行效果如下：

http://blog.csdn.net/qq_28602957/article/details/51814437

php+JQuery+Ajax简单实现页面异步刷新 （转）的更多相关文章

  1. Java进阶知识01 Struts2下的 jquery+ajax+struts 技术实现异步刷新功能

    1.效果图示 横线上方的部分不动(没有刷新),下方实现刷新(异步刷新) 2.实现步骤 jquery+ajax+struts技术实现异步刷新功能的步骤:    1.需要用到 jquery+ajax+st ...

  2. Jquery Ajax简单封装(集中错误、请求loading处理)

    Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...

  3. Jquery Ajax调用aspx页面方法

    Jquery Ajax调用aspx页面方法 在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通过as ...

  4. jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法

    1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是“a ...

  5. Jquery Ajax调用aspx页面方法 (转载)

    在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通过aspx.cs中的静态方法+WebMethod进 ...

  6. Jquery Ajax调用aspx页面实例

    目前,我会的几种asp.net界面与后台代码交互方式有几种: 1.webform+服务器控件交互: 2.webform+jquery+ajax+一般处理程序交互: 3.webform+jquery+a ...

  7. Django1.6 + jQuery Ajax + JSON 实现页面局部实时刷新

    最近微信公众帐号要扩展做一个签到系统,签到结果在一个网页上实时更新,即页面局部刷新.我想用Ajax来实现,之前公众帐号是用的Django搭的,我查找了Django的官方文档,没有封装Ajax.网上有各 ...

  8. C# .net Jquery ajax 简单示例

    jquery中ajax相信大家都不陌生,这里只写个简单例子示意用法,详细后续再写. 在html中按钮事件中添加如下js var param = "data=" + escape($ ...

  9. jQuery AJAX实现调用页面后台方法

    1.新建demo.aspx页面.2.首先在该页面的后台文件demos.aspx.cs中添加引用. using System.Web.Services; 3.无参数的方法调用. 大家注意了,这个版本不能 ...

随机推荐

  1. v4l2 下载

    To clone the master development repository, install git, and run: git clone git://github.com/torvald ...

  2. codeforces 357

    C 题意: ###n个勇士编号1-n,m个回合对战,每个回合由仍留在游戏里的编号Li~Ri的人参加,胜者为Xi,输的人退出游戏. ###求一个a1-an的序列,若ai为胜者,则ai=0,否则ai=打败 ...

  3. Swift学习笔记 - 位移枚举的按位或运算

    在OC里面我们经常遇到一些枚举值可以多选的,需要用或运算来把这些枚举值链接起来,这样的我们称为位移枚举,但是在swift里面却不能这么做,下面来讲解一下如何在swift里面使用 OC的位移枚举的区分 ...

  4. redhat6.4 数据包无法到达

    由于redhat在初始化的时候,防火墙设置为icmp-host-prohibited,导致数据包无法到达. 具体iptables(所在目录/etc/sysconfig)如下: # Firewall c ...

  5. 运行jar_测试代码

    1.Eclipse 将 工程 导出成 jar Eclipse --> Export... --> 界面中树状图形中选择" Java下的'JAR file' "(不知道这 ...

  6. yii2:doajax(post)会报500错误

    yii2:doajax(post)会报500错误:这是因为yii2开启了防御csrf的攻击机制,可去先去掉,在控制器里去掉:public $enableCsrfValidation = false , ...

  7. 完全卸载gitlab

    完全卸载删除gitlab 2017年5月29日 wuhao 暂无评论 4,089次浏览   完全卸载删除gitlab 1.停止gitlab   1 gitlab-ctl stop 2.卸载gitlab ...

  8. maven setting仓库镜像

    国内连接maven官方的仓库更新依赖库,网速一般很慢,收集一些国内快速的maven仓库镜像以备用. 最新更新:2016年11月11日 18:05:40 阿里云提供Maven私服,我把配置文件贴一下,自 ...

  9. DDOS工具合集---CC 2.0(僵尸网络proxy，单一url，可设置cookie，refer)，传奇克星（代理+单一url，可设置cookie），NetBot_Attacker网络僵尸1.0（僵尸网络，HTTP NO-Cache Get攻击模式，CC攻击，HTTP空GET请求攻击），傀儡僵尸VIP1.4版（僵尸网络，动态单一url）、上兴网络僵尸2.3、中国制造网络僵尸、安全基地网络僵尸==

    DDOS工具合集 from:https://blog.csdn.net/chinafe/article/details/74928587 CC 著名的DDOS CC工具,效果非常好!CC 2.0使用了 ...

  10. MongoCola使用教程 1 - MongoDB的基本操作和聚合功能---Mongdb客户端软件操作说明

    前言 在开始正文之前,感谢博客园的Nosql爱好者对于MongoCola工具的试用(使用).特别感谢 呆呆 这位朋友的Bug报告,让我纠正了一个很严重的Bug.同时也感谢以前的多个网友在博客留言中给我 ...