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. 《JavaScript 闯关记》

    为何写作此课程 stone 主要负责基于 Web 的企业内部管理系统的开发,虽然能够熟练地使用 JavaScript,但随着对 JavaScript 的理解越来越深,才发现自己尚未掌握其精髓. 201 ...

  2. 在windows平台下忘记了root的密码如何解决?

    1.打开MySQL配置文件 my.ini中,添加上skip-grant-tables,可以添加到文件的末尾或者是这添加到[mysqld]的下面. 2.然后重启MYSQL服务 windows环境中: n ...

  3. locate linux文件查找命令

    locate 让使用者可以很快速的搜寻档案系统内是否有指定的档案.其方法是先建立一个包括系统内所有档案名称及路径的数据库,之后当寻找时就只需查询这个数据库,而不必实际深入档案系统之中了.在一般的 di ...

  4. Android 截取本地图库图片 并显示

    package com.example.image; import android.app.Activity; import android.content.Intent; import androi ...

  5. Spring随笔 - 事务隔离级别

    Spring提供5中事务隔离级别: ISOLATION_DEFAULT:使用数据库后端的默认隔离级别. ISOLATION_READ_UNCOMMITTED:允许读取尚未提交的数据变更.可能会导致脏读 ...

  6. 如何实现 Excel方式二维变色提示的 m*n 表格

    此代码当m≠n 时,有问题.暂时还未解决此问题. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  7. BaseAdapter导致notifyDataSetChanged()无效的三个原因及处理方法

    原文  http://blog.csdn.net/dawanganban/article/details/21376979 前一段时间在做一个项目的时候遇到了一个关于BaseAdapter的notif ...

  8. skynet配置文件

    启动skynet需要一个配置文件 我们看下examples/config root = "./"         表示根目录是skynet启动时的目录thread = 8     ...

  9. 震撼,强烈推荐 OrangeUI For FireMonkey

    今天,高勇上传了一个演示rtx for kbmMW的android应用,我下载测试,被实际的效果给震惊了!万万想不到的,用OrangeUI做的一个List列表,数据通过远程查询,运行效果在我看来,达到 ...

  10. 栈和队列的Java实现

    一.  栈 1.概念 栈是一种特殊的线性表,它只能在栈顶(top)进行插入(push)和删除(pop)操作. 栈的常用操作: 入栈(push):向栈顶插入元素 出栈(pop):从栈顶删除元素 访问栈顶 ...