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

利用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>

<script language="javascript"
src="./jquery-1.7.1.min.js"
/></script>
<script language="javascript" src="./ajax_json.js"
/></script>

</head>

<body
style="font-family:Arial;line-height:150%">
 
<a
href="javascript:getAllUsers();">获取所有用户信息</a>
&nbsp;&nbsp;
 
<!-- 用于显示返回结果 -->
 <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

<!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>

<script language="javascript"
src="./jquery-1.7.1.min.js"
/></script>
<script language="javascript" src="./ajax_json.js"
/></script>

</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

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_r('('+ 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);
 }
?>

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

  1. Jquery,ajax返回json数据后呈现到html页面的$.post方式。

    ------------------------------------------------------完整版------------------------------------------- ...

  2. PHP AJAX 返回JSON 数据

    例子:利用AJAX返回JSON数据,间接访问数据库,查出Nation 表,并用下拉列表显示 造一个外部下拉列表框 </select> JQurey代码 $(document).ready( ...

  3. jquery实现ajax,返回json数据

    jquery实现ajax可以调用几种方法 我经常用的是$get(url,data,callback,type)方法 其中url是异步请求的页面(可以是.ashx文件),data是参数,callback ...

  4. 如何在.NET MVC中使用jQuery并返回JSON数据

    http://blog.csdn.net/dingxingmei/article/details/9092249 开始实践 - jQuery端 假设我们要从服务器端获取一个文章列表,并把文章条目显示在 ...

  5. JQuery ajax返回JSON时的处理方式

    最近在使用JQuery的ajax方法时,要求返回的数据为json数据,在处理的过程中遇到下面的几个问题,那就是采用不同的方式来生成json数据的时候,在$.ajax方法中应该是如何来处理的,下面依次来 ...

  6. [转]如何在.NET MVC中使用jQuery并返回JSON数据

    本文转自:http://blog.sina.com.cn/s/blog_48e42dc90100xp1p.html 二.开始实践 - jQuery端 假设我们要从服务器端获取一个文章列表,并把文章条目 ...

  7. ajax 返回json数据操作

    例子: $.ajax({ url: "<?=Url::toRoute('add-all-staff')?>", type: 'get', dataType: 'json ...

  8. ajax返回json数据示例

    前端发送请求与接收数据: $.ajax({        type : "post",        url : "/queryStudent",       ...

  9. Jquery Ajax 提交json数据

    在MVC控制器(这里是TestController)下有一个CreateOrder的Action方法 [HttpPost] public ActionResult CreateOrder(List&l ...

随机推荐

  1. Android 简单的代码混淆

    Android的代码混淆是开发者需要了解的相关知识,它能够防止android应用程序的反编译.因为android程序多数是java语言开发的,而java代码很容易被反编译,所以为了使android应用 ...

  2. mysql数据库sql优化

    此文章为转载 一. 前提 这里的原则 只是针对mysql数据库,其他的数据库 某些是殊途同归,某些还是存在差异.我总结的也是mysql普遍的规则,对于某些特殊情况得特殊对待.在构造sql语句的时候养成 ...

  3. JSP 适配手机屏幕

    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scal ...

  4. openstack外篇之认识mysql授权及一些操作

    openstack外篇之认识mysql授权及一些操作  http://www.aboutyun.com/thread-11405-1-1.html

  5. HDU 1045(Fire Net)题解

    以防万一,题目原文和链接均附在文末.那么先是题目分析: [一句话题意] 给定大小的棋盘中部分格子存在可以阻止互相攻击的墙,问棋盘中可以放置最多多少个可以横纵攻击炮塔. [题目分析] 这题本来在搜索专题 ...

  6. 二.ubuntu14.04 3D特效设置

    一.如果按照第一篇都设置好了(显卡驱动等都已经正常),然后 1.安装CCSM设置管理器 用鼠标点击屏幕左侧Unity程序启动栏中的“Ubuntu软件中心”(有“A”字形的公文包图标), 在弹出的“Ub ...

  7. Nhibernate 映射关系，一对多 多对一与多对手在映射文件中的体现。

    今天做了第一个Nhibernate项目,摸着石头过河,学到了一些东西,在这里将自己总结体会到的一些映射关系写出来,与大家分享,由于是初学者,如果有不对的地方希望大家能够指出来. 首先要说明要建立的几张 ...

  8. C++进程间通信（常用理解例子）-买票

    #include "stdafx.h" #include <iostream>using namespace std; #include "windows.h ...

  9. 列表checkbox全选

    $(document).ready(function(){ $(":checkbox:eq(0)").change(function(){ if ($(this).is(" ...

  10. Android01-概述

    1.Android特点    开源和免费    强大的研发力量,完整的生态圈    互联网服务的支持 2.Android系统架构    应用层    应用框架层    系统运行库层    Linux内 ...