光阴过客hkyan.blog.chinaunix.net

人生就是一段旅程,在乎的是沿途的风景和陪你看风景的人

  • 博客访问: 5442217
  • 博文数量: 759
  • 博客积分: 2150
  • 博客等级: 上尉
  • 技术积分: 12986
  • 用 户 组: 普通用户
  • 注册时间: 2011-06-29 16:28
文章分类

全部博文(759)

文章存档

2017年(66)

2016年(120)

2015年(188)

2014年(157)

2013年(152)

2012年(71)

微信关注

IT168企业级官微



微信号:IT168qiye



系统架构师大会



微信号:SACC2013

订阅
热词专题

分类: JavaScript

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

一、语法简介

1.1 ajax基本语法

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


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


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

1.2 php端的接收方法

<!--?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: "http://xxx/test/demo.php",
  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

<!--?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下载地址

下载demo


阅读(1170) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册