页面显示如下：

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. Shiro缓存使用Redis、Ehcache、自带的MpCache实现的三种方式实例

    第一种:使用Redis做缓存,将数据存储到redis数据库中 第一步:在项目里面引入redis,配置文件如下: 配置文件:spring_shiro_redis.xml <?xml version ...

  2. 因为swap分区无法启动

    用户启动时停在如下截图

  3. php。。。

    我可能不会是一个合格的程序员,因为不够专一,学的种类多,精通的却很少,现在我要做为一个php程序员,专注起航了...接下来半年全力以赴,做出成绩吧. 另外之前的狂刷要一千题也要开始每天更新了,最难的就 ...

  4. 删除读取失败的服务 <读取描述失败错误代码2>

    1.以管理员身份运行命令提示符 2.sc delete 服务名

  5. java sleep()和wait()的区别

    java sleep()和wait()的区别? sleep()和wait()都能阻塞当前线程. 区别1: sleep()属于Thread类:wait()属于Object类. 区别2: 调用sleep( ...

  6. mysql数据库(三)：查询的其他用法

    一. 查询—IN的用法 语法:select ... from 表名 where 字段 a in (值b, 值c, 值d...) 等价于 select ... from 表名 where 字段a=值b ...

  7. Robot Framework(一)

    一. 定义 Robot Framework是一款python编写的功能自动化测试框架,具有良好的可扩展性,支持关键字驱动,可以同时测试多种类型的客户端或者接口,可以进行分布式测试执行 二. Robot ...

  8. Java 控制台应用程序部署 Linux

    http://blog.csdn.net/brushli/article/details/12106339 注意:Windows 下编译的sh脚本,在linux上会存在编码问题,需在 linux 下编 ...

  9. 快速掌握Android 虚拟机（AVD)方法

    摘自 http://jingyan.baidu.com/article/15622f24707710fdfdbea553.html 参阅:http://jingyan.baidu.com/articl ...

  10. 【Wannafly挑战赛9-B】数一数

    链接:https://www.nowcoder.net/acm/contest/71/B 题目就不贴了.. 设res[i]为第i行的最终结果,可以想到,res[i]为0或不为0.长度不是最短的字符串r ...