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. Jquery揭秘系列：谈谈bind,one,live,delegate,on事件及实现

    在Jquery里面,我们用的最多的就是事件绑定了,事件绑定有多个函数.例如:bind,one,live,delegate,on等等. on() jQuery事件绑定.on()简要概述及应用 看源码发现 ...

  2. 利用sql里的xpath生成表格

    SELECT (SELECT * from Common.Common_Setup_CityData FOR XML PATH('tr'), TYPE).query('      for $item ...

  3. Hibernate工作原理及为什么要用?（转http://www.cnblogs.com/javaNewegg/archive/2011/08/28/2156521.html）

    原理:1.通过Configuration().configure();读取并解析hibernate.cfg.xml配置文件2.由hibernate.cfg.xml中的<mapping resou ...

  4. Android Material Design之Toolbar与Palette

    转:http://blog.csdn.net/jdsjlzx/article/details/41441083 前言 我们都知道Marterial Design是Google推出的全新UI设计规范,如 ...

  5. 客户端持久化解决方案：indexedDB

    客户端持久化解决方案:indexedDB indexedDB适合大量的结构化的数据存储:打开数据库和获取数据对象都是异步的: 需要开启事务,访问的objectStore都要是在开启的事务中. 数据库结 ...

  6. Delphi下重载窗体CreateParams翻转关闭按钮

    type  TForm1 = class(TForm)  private    { Private declarations }  public    { Public declarations }  ...

  7. ListFragment和ListActivity的setOnItemClickListener不起作用

    在使用ListFragment时,发现一个奇怪的问题,就是getListView().setOnItemClickListener(new OnItemClickListener...)不起作用.在s ...

  8. css案例学习之id要唯一

    ID有两个的后果 <html> <head> <title>ID选择器</title> <style type="text/css&qu ...

  9. 如何去除List中的重复值？

    今天碰到一个问题,已经有一个List<string>,里面有重复值,希望将重复值去掉,同时不能破坏现有的顺序. 感谢 http://bbs.csdn.net/topics/39024721 ...

  10. c++适配器模式

    你想使用一个已经存在的类,而它的接口不符合你的需求. 创建一个类需要和其他类协同完成任务,需要一个适配器将其他类的方法都转接到适配器当中 什么是适配器模式:有一个目标客户类想适用已经存在类的接口,但是 ...