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. VMware下桥接设置

    操作环境 主机:Win7 X86 SP1 虚拟机:VMware station 8 虚拟机里的系统:Fedora 15 环境上,不管什么系统,什么版本的虚拟机,使用上都是大同小异的,毕竟核心是不变的. ...

  2. sqlserver 2008 局域网跨服务器T-SQL操作(一)

    --查看当前链接情况: select * from sys.servers; --增加链接,参数:服务器别名,为链接服务器的OLE DB数据源的产品名称,与此数据源对应的OLE DB访问接口的唯一编程 ...

  3. web Form 表单method="get" method="post" 区别

    get和post方法的不同 在B/S应用程序中,前台与后台的数据交互,都是通过HTML中Form表单完成的.Form提供了两种数据传输的方式——get和post.虽然它们都是数据的提交方式,但是在实际 ...

  4. C# 循环的应用 手机号抽奖 选班长的练习题

    //第一题 //20个手机号滚动显示随机抽出一个中奖号码来: static void bbb(string[] args) { string[] cellPhone = new string[] { ...

  5. VC com 通信实例

    HANDLE hCom;//全局變量串口句柄 COMMTIMEOUTS TimeOuts; DCB dcb; 按鈕代碼() { hCom=CreateFile(L“COM1”,// 串口名稱 GENE ...

  6. AfxEnableControlContainer()

    1)OLE(Object Linking and Embedding,对象连接与嵌入).是一种面向对象的技术,利用OLE可开发可重复使用的软件组件(COM). 2)ActiveX 控件是基于组件对象模 ...

  7. Spring发送电子邮件

      Spring提供了发送电子邮件的功能,它向用户屏蔽了底层邮件系统的一些细节,同时代表客户端负责底层的资源处理. Spring的邮件服务支持主要是通过JavaMailSender这个接口实现的: p ...

  8. AsyncTask 不能与Thread.sleep()同时使用解决方案

    public class MainActivity extends Activity { private ImageView iv_ads; String urrstrString = "h ...

  9. javascript定时器（上）

    (一).setInterval 间隔性 function show(){ alert(‘a’); } setInterval(show,1000); 每隔1000毫秒(1秒)执行一次show这个函数: ...

  10. Google机器学习教程心得（一）

    Hello world Google Machine Learning Recipes 1 官方中文博客 http://chinagdg.org/2016/03/machine-learning-re ...