jquery ajax返回json数据进行前后台交互实例

先我们看演示代码

代码如下

复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax json test</title>

</head>

<body style="font-family:Arial;line-height:150%">

<a href="javascript:getAllUsers();">获取所有用户信息</a>   


<div id="users"></div>

</body>
</html>

当我们点击获取所有用户信息在div的id=users中显示

Ajax返回的JSON字符串：
[{"userId":1,"userName":"Raysmond"},{"userId":2,"userName":"u96f7u5efau5764"},{"userId":3,"userName":"Rita"}]

解析出来的结果为：
userId = 1
userName = Raysmond
userId = 2
userName = 雷建坤
userId = 3
userName = Rita

上面代码大家可能看不懂，我们现在来详细介绍

代码部分

代码如下

复制代码

index.html

</head>

<body style="font-family:Arial;line-height:150%">
<h1>Ajax利用JSON进行前后台交互</h1>
<a href="javascript:getAllUsers();">获取所有用户信息</a> <br/>


<div id="users"></div>
</body>
</html>ajax_json.js

/**
* jQuery 同步Ajax封装
*/
function getJson(RequestData,URL){
var reJson;
$.ajax({
  type:'POST',
  url:URL,
  data:RequestData,
  async:false, //为了简便，设置为同步操作
  cache: false,
  success:function(responseData){
   reJson=responseData;
  }
});
return reJson;
}

/**
* 获取所有用户信息
*/
function getAllUsers(){
var url = "./service.php";
var request = 'action=get_all_users';
//从后台获取并解析，由于上面封装ajax采用的是同步返回，
//所以这样操作能成功获取返回数据
var json = getJson(request,url);
var users = eval('('+ json +')');

var usersHtml = '<br/><span style="color:red;">Ajax返回的JSON字符串：</span><br/>'
    + json + '<br/><br/><span style="color:red;">解析出来的结果为：</span><br/>';
for(var i=0;i<users.length;++i){
  usersHtml += 'userId = ' + users[i].userId + '<br/>'
       + 'userName = ' + users[i].userName + '<br/>';
  }
//把构造的HTML利用jQuery动态显示到页面
$('#users').empty().html(usersHtml);
}
service.php

<?php
//接受请求参数并根据参数选择操作
if(isset($_POST['action'])&&$_POST['action']!=""){
   switch($_POST['action']){
    case 'get_all_users': getAllUsers(); break;
    default:
    }
}

//处理请求：以JSON格式返回所有用户信息
function getAllUsers(){
  $users = array(
   array("userId"=>1,"userName"=>"Raysmond"),
   array("userId"=>2,"userName"=>"雷建坤"),
   array("userId"=>3,"userName"=>"Rita")
   );
  echo json_encode($users);
}
?>

时间： 2024-10-24 16:43:57

jquery ajax返回json数据进行前后台交互实例

jquery ajax返回json数据进行前后台交互实例的相关文章

jQuery通过Ajax返回JSON数据

JQuery ajax 返回json时出现中文乱码该如何解决_AJAX相关

JQuery ajax返回JSON时的处理方式 (三种方式)_AJAX相关

jquery ajax 导入json数据进行修改操作

jquery ajax 读取json数据存入表格中

C# AJAX 返回json数据问题

ThinkPHP中使用ajax接收json数据的方法_php实例

$.ajax 返回JSON 数据及无法成功解决办法

JQuery ajax 返回json时出现中文乱码该如何解决