利用ajax实现与php(json数组)数据交互，并局部刷新页面

json

适用于现代 C++ 的 JSON。

项目地址：https://gitcode.com/gh_mirrors/js/json

免费下载资源

我是高手高手高高手

13445人浏览 · 2016-09-22 12:08:36

我是高手高手高高手 · 2016-09-22 12:08:36 发布

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

本文主要有以下几个要点：

ajax的基本语法结构
jQuery基本语法
json数组基本结构
ajax回调函数中的json数组解析及局部刷新
php基本语法
ajax与php的对接

php中post数据提交方式与接收

ajax基本语法

$.ajax({
    type: "post",  //数据提交方式（post/get）
    url: "demo.php",  //提交到的url
    data: {username:username,password:password},//提交的数据
    dataType: "json",//返回的数据类型格式
    success: function(msg){
      ...//返回成功的回调函数
    },
    error:function(msg){
      ...//返回失败的回调函数
    }
});

php端的接收方法

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

例子：demo.html

html端代码demo.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ajaxTest</title>
</head>
<body>
    <input type="text" id="username">
    <input type="text" id="password">
    <button id="sub">查询</button>
    <span id="text"></span><!-- 用以显示返回来的数据，只刷新这部分地方 -->
</body>
<script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
</html>

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.html中加入以下js代码

<script>
  $(function(){
    $('#sub').click(function(){
      var username=$('#username').val();
      var password=$('#password').val();
      $.ajax({
        type: "post",
        url: "demo.php",
        data: {username:username,password:password},//提交到demo.php的数据
        dataType: "json",//回调函数接收数据的数据格式
        success: function(msg){
          $('#text').empty();   //清空Text里面的所有内容
          var data='';
          if(msg!=''){
            data = eval("("+msg+")");    //将返回的json数据进行解析，并赋给data
          }
          $('#text').html("用户名为：" + data.username + ",密码为：" + data.password);    //在#text中输出
          console.log(data);    //控制台输出
        },
        error:function(msg){
          console.log(msg);
        }
      });
    });
  })
</script>

最终效果如下

这里写图片描述

demo下载地址

下载demo : http://download.csdn.net/detail/haibusoi/9244147

引用：http://blog.csdn.net/haibusoi/article/details/49663243

GitHub 加速计划 / js / json

下载

适用于现代 C++ 的 JSON。

最近提交(Master分支：1 个月前 )

b451735f Bumps [lukka/get-cmake](https://github.com/lukka/get-cmake) from 4.0.2 to 4.0.3. - [Release notes](https://github.com/lukka/get-cmake/releases) - [Commits](https://github.com/lukka/get-cmake/compare/ea004816823209b8d1211e47b216185caee12cc5...6b3e96a9bc9976b8b546346fdd102effedae0ca8) --- updated-dependencies: - dependency-name: lukka/get-cmake dependency-version: 4.0.3 dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> 1 天前

568b708f Bumps [step-security/harden-runner](https://github.com/step-security/harden-runner) from 2.12.0 to 2.12.1. - [Release notes](https://github.com/step-security/harden-runner/releases) - [Commits](https://github.com/step-security/harden-runner/compare/0634a2670c59f64b4a01f0f96f84700a4088b9f0...002fdce3c6a235733a90a27c80493a3241e56863) --- updated-dependencies: - dependency-name: step-security/harden-runner dependency-version: 2.12.1 dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> 6 天前