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. springmvc jstl

    springmvc运用maven的jetty插件运行成功,部署在tomcat6报错:ClassNotFoundException: javax.servlet.jsp.jstl.core.Config ...

  2. VirtualBox镜像复制载入

    转发:http://blog.csdn.net/dotuian/article/details/9127229 一,虚拟镜像文件格式 VirtualBox磁盘镜像文件(VDI, VMDK, VHD, ...

  3. SqlServer2008(R2) 数据库使用外网IP实例连接服务器

    1.打开sql2008,使用windows身份登录 2.登录后,右键选择"属性".左侧选择"安全性",选中右侧的"SQL Server 和 Windo ...

  4. Android 开发中的View事件监听机制

    在开发过程中,我们常常根据实际的需要绘制自己的应用组件,那么定制自己的监听事件,及相应的处理方法是必要的.我们都知道Android中,事件的监听是基于回调机制的,比如常用的OnClick事件,你了解它 ...

  5. sqlserver 2008存储过程 多个可空条件任意组合

    很多程序员在实际开发中,经常遇到这种情况,列表上方有很多条件,包含下拉框,输入框等等,这些条件都可以不输入,如果我们需要写一个存储过程,很多条件挨个判断是否为空,且进行任意组合,任何一个开发人员都会疯 ...

  6. TcpClient

    public class TcpClientSession { protected TcpClient Client { get; set; } /// <summary> /// 远程地 ...

  7. CRC循环校验码

    为了防止数据在传输的时候丢失或被篡改,有了各种校验码. 每种CRC校验都有自己的多项式.每个多项式都有唯一对应的二进制. CRC16就如果名字一样,校验码就是16位的 如果CRC32就是32位的. 原 ...

  8. android Mvp简单实用

    View 对应于Activity,负责View的绘制以及与用户交互Model 依然是业务逻辑和实体模型Presenter 负责完成View于Model间的交互 模拟客户端的登录操作,并实现登录成功与登 ...

  9. 阿里云的linux命令小结

    /** ---------------- [ 华丽分割线 ] ------------------------ ### 121.40.120.167 操作 ### 1.启动 nginx cd /usr ...

  10. JavaScript的原型

    //回顾构造函数 function Box(name, age) { this.name = name; //实例属性 this.age = age; this.run = function() { ...