页面显示如下：

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. CPU、内存通俗概念

    在计算机的组成结构中,有一个很重要的部分,就是存储器.存储器是用来存储程序和数据的部件,对于计算机来说,有了存储器,才有记忆功能,才能保证正常工作.存储器的种类很多,按其用途可分为主存储器和辅助存储器 ...

  2. Mybatis配置插入数据返回主键ID

    需要在insert方法中添加 <insert id="insertSelective" parameterType="com.midou.ott.model.MDA ...

  3. mysql——jdbc驱动下载&连接mysql例子

    mysql-connector-java-5.1.46.zip[解压后里面jar文件就是所需要的] https://dev.mysql.com/get/Downloads/Connector-J/my ...

  4. make install报错

    今天,在运行公司内核的机器上,编译标准内核,结果提示: 问题原因: 原来安装新内核的时候,会与原内核比较,如果缺少了某些模块,就会提示”ERROR: modinfo: could not find m ...

  5. Android -- SQLite 数据库创建，增删改查，事务处理

    1. 概述 在Android平台上,集成了一个嵌入式关系型数据库-SQLite,SQLite3支持 NULL.INTEGER.REAL(浮点数字).TEXT(字符串文本)和BLOB(二进制对象)数据类 ...

  6. 监控系统信息模块psutil

    About psutil (python system and process utilities) is a cross-platform library for retrieving inform ...

  7. 远程桌面.【转】Win10 家庭（home）版启用远程桌面（Remote Desktop）功能

    ZC:YeJun的台式机是 Win10家庭版,默认我们想连上她的电脑是连不上的,用下面的方式,我的笔记本可以连上了 ZC:我的下载资料,存放于 "E:\BaiduYunDownload\Wi ...

  8. HIVE- SCD缓慢变化

    SCD缓慢变化维,比如一个用户维表,用户属性会变化,但是不会变化很剧烈,可能一年只会变化一两次,也不会所有用户的属性都会有变化,只有少量的数据发生变化,所以叫缓慢变化维.这种问题就是由于维度的变化所造 ...

  9. css tips —— 可见性对图片加载的影响

    如果是<img />标签,无论是display: none:还是visibility: hidden;都会加载图片: 但是如果是背景图片即background-image: url(xxx ...

  10. Windows系统变量列表

    %ALLUSERSPROFILE% : 列出所有用户Profile文件位置. %APPDATA% :  列出应用程序数据的默认存放位置. %CD% :  列出当前目录. %CLIENTNAME% :  ...