Chinaunix首页 | 论坛 | 博客
  • 博客访问: 7888581
  • 博文数量: 701
  • 博客积分: 2150
  • 博客等级: 上尉
  • 技术积分: 13233
  • 用 户 组: 普通用户
  • 注册时间: 2011-06-29 16:28
个人简介

天行健,君子以自强不息!

文章分类

全部博文(701)

文章存档

2019年(2)

2018年(12)

2017年(76)

2016年(120)

2015年(178)

2014年(129)

2013年(123)

2012年(61)

分类: JavaScript

2017-03-30 15:53:08

利用ajax实现与php数据交互,并局部刷新页面

一、语法简介

1.1 ajax基本语法

$.ajax({
    type: "post",                               //数据提交方式(post/get)
    url:  "",           //提交到的url
    data: {username:username,password:password},//提交的数据
    dataType: "json",                           //返回的数据类型格式


    success: function(msg){
      ...//返回成功的回调函数
    },


    error:function(msg){
      ...//返回失败的回调函数
    }
});

1.2 php端的接收方法

    $username=$_POST['username'];  //接收以post方式提交来的username数据
    $password=$_POST['password'];
?>

二、示例详解

2.1 html端代码demo.html


  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>ajaxTest</title>
  6. </head>
  7. <body>
  8.     <input type="text" id="username">
  9.     <input type="text" id="password">
  10.     <button id="sub">查询</button>
  11.     <span id="text"></span>
  12. </body>
  13. <script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
  14. </html>

2.2 在demo.html中加入以下js代码

  1. <script>
  2.   $(function(){
  3.     $('#sub').click(function(){
  4.       var username=$('#username').val();
  5.       var password=$('#password').val();
  6.       $.ajax({
  7.         type: "post",
  8.         url: "",
  9.         data: {username:username,password:password}, //提交到demo.php的数据
  10.         dataType: "json", //回调函数接收数据的数据格式

  11.         success: function(msg){
  12.           $('#text').empty(); //清空Text里面的所有内容
  13.           var data='';
  14.           if(msg!=''){
  15.             data = eval("("+msg+")"); //将返回的json数据进行解析,并赋给data
  16.           }
  17.           $('#text').html("用户名为:" + data.username + ",密码为:" + data.password); //在#text中输出
  18.           console.log(data); //控制台输出
  19.         },

  20.         error:function(msg){
  21.           console.log(msg);
  22.         }
  23.       });
  24.     });
  25.   })
  26. </script>

2.3 php端代码demo.php

    header('Content-type:text/json;charset=utf-8');
    $username=$_POST['username'];
    $password=$_POST['password'];


    $data='{username:"' . $username . '",password:"' . $password .'"}';//组合成json格式数据
    echo json_encode($data);//输出json数据
?>

三、最终效果如下

这里写图片描述

demo下载地址


阅读(3158) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~