前面已经封装好了一个方法ajax()，通过这个方法可以实现Ajax请求，接下来就是给出

例程来测试这个方法和实现简单的功能。

  视图的部分代码如下：

1
2
3
4
5
6
7
8
9
<body>
    <div>
        the Numger is :                <br /><label id="number">  </label>  <br />
        the Students' Infomation:<br /><label id="studentInfo">   </label>  <br />
        <input type="button" value="请求数字(ajax请求)" onclick='requestNumber()'/> 
        <label>  </label>
        <input type="button" value="请求学生信息(json请求)" onclick="requestStudentInfo()" />
    </div>
</body>

功能一：浏览器向服务器请求一个数字（通过ajax实现）

视图代码中添加脚本代码：

 1 <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
 2 <script src="../../Scripts/ajax.js" type="text/javascript"></script>
 3 <script src="../../Scripts/common.js" type="text/javascript"></script>
 4
 5 <script language="javascript" type="text/javascript">
 6    //请求数字
 7   function requestNumber() {
 8        ajax("POST","/Home/Get_Number", function (resText) {
 9           //直接接收Ajax请求返回的内容
10           var text = resText;
11           $("number").innerHTML = text;
12        });
13   }
14 </script>

后台服务器代码：

1 //ajax请求的action方法
2 public void Get_Number()
3 {
4     int num =10;
5     Response.Write(num);
6     return;
7 }

功能二：浏览器向服务器请求一个学生的信息（通过Json实现）

视图代码中添加脚本代码：

 1 //请求学生信息
 2 function requestStudentInfo() {
 3     ajax("POST","/Home/Get_Student", function (resText) {
 4         //将序列化的字符串内容进行解析，得到Js对象
 5         var student = JSON.parse(resText);
 6         var text="";
 7         text += "学号：" + student.StuId  + "<br />";
 8         text += "姓名：" + student.Name   + "<br />";
 9         text += "性别：" + student.Gender + "<br />";
10         text += "年龄：" + student.Age    + "<br />"
11
12         $("studentInfo").innerHTML = text;
13     });
14 }

代码中使用到了一个方法JSON.parse(),该方法是将返回的序列化字符串解析成一个对象或者对象集合，
因此需要添加js库--json2.js,如下：

<script src="../../Scripts/json2.js" type="text/javascript"></script>

后台服务器代码：

1 //json请求的action方法
2 public JsonResult Get_Student()
3 {
4     Student student = new Student(1001, "张三","男",22);
5     return Json(student);  //Json()方法将一个对象或者对象集合进行序列化
6 }

运行结果：

总结：通过封装好的ajax()方法实现了向服务器请求一个数字和一个学生信息对象的功能，

ajax请求和json请求没有本质上的区别，两者都是通过ajax()方法来发送XMLHttpRequest

请求，只是ajax请求就直接接收返回的数据就可以了，而json请求需要将接收到的序列化字

符串解析成JS对象或者对象集合(反序列化)，同时也要求服务器端将对象或者对象集合序列化

成字符串进行发送(序列化)。

转-----实现基本的Ajax和Json请求的更多相关文章

  1. 实现基本的Ajax和Json请求

    前面已经封装好了一个方法ajax(),通过这个方法可以实现Ajax请求,接下来就是给出 例程来测试这个方法和实现简单的功能.   视图的部分代码如下: <body> <div> ...

  2. 自用ajax的json请求

    function singlePriceSubmit(){ var json={}; json["area"]=areaStr1; json["goodCateIdStr ...

  3. servlet 中处理 json 请求，并访问 service 类，返回处理结果

    前言:jar 包中的 servlet 必须可以处理前端发出的 ajax 请求,接收参数,并返回结果. github地址:yuleGH github 这里有个约定,url 地址是 .json 结尾的,如 ...

  4. AJAX 中JSON 和JSONP 的区别 以及请求原理

    AJAX 跨域请求 - JSONP获取JSON数据 博客分类: Javascript /Jquery / Bootstrap / Web   Asynchronous JavaScript and X ...

  5. Jquery DataTable AJAX跨域请求的解决方法及SSM框架下服务器端返回JSON格式数据的解决方法

    如题,用HBuilder开发APP,涉及到用AJAX跨域请求后台数据,刚接触,费了不少时间.幸得高手指点,得以解决. APP需要用TABLE来显示数据,因此采用了JQ 的DataTable.  在实现 ...

  6. jQuery:多个AJAX/JSON请求对应单个回调

    原文链接:jQuery: Multiple AJAX and JSON Requests, One Callback 原文日期: 2014年4月15日 翻译日期: 2014年4月22日 翻译人员: 铁 ...

  7. Ajax跨域之ContentType为application/json请求失败的问题

    项目里的接口都是用springmvc写的,其中在@requestmapping接口中定义了consumes="application/json",也就是该接口只接受ContentT ...

  8. AJAX跨域请求json数据的实现方法

    这篇文章介绍了AJAX跨域请求json数据的实现方法,有需要的朋友可以参考一下 我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式, ...

  9. jQuery 发送 ajax json 请求。。

    $.extend({ postJson: function (data) { data = data || {} $.ajax({ type: "POST", url: data. ...

随机推荐

  1. C#网站实现QQ第三方登陆# C#快速开发教程

    C#网站实现QQ第三方登陆 说起在网站上面可以直接使用QQ登录功能大家并不陌生.但翻其官方提供的SDK包中却没有C#方向的. 但是我们有个牛人叫张善友,做了一个民间SDK.下面我们就是用他所写的SDK ...

  2. css：nth-of-type()选择器用法

    今天做一个页面,无意中看到这个nth-of-type感觉挺方便的,之前单双行有的有横线,有的无横线一般在html中单独再写border-right:none等之类的.现在发现这个好东西赶紧记录下来. ...

  3. 浅谈href 和 src的区别

    href 表示超文本引用(hypertext reference),在 link.a 等元素上.src 表示来源地址,在 img.script.iframe 等元素上.src 的内容,是页面必不可少的 ...

  4. java问题：类的定义，对象的定义？

    java问题:类的定义,对象的定义? 类是一组数据和函数的集合,只是抽象的概念,它的作用就是生成对象,它生成对象后,就为这个对象分了一块存储区,类可以生成无限多个对象,每个对象都有自己的存储区,在类里 ...

  5. Ajax结合Js操作灵活操作表格

    Table页面: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...

  6. oracle的购买价格研究

    如果你是一个架构师,在数据库选型上除了技术选型,更重要的可能是性价比的选择,而oracle是现今排名第一的数据库,因此对oracle的价格有所了解是必须的. 几个要点: 1.oracle授权(也就是购 ...

  7. JAVA zip解压 MALFORMED 错误

    最近在在使用zip 解压时,使用JDK1.7及以上版本在解压时,某些文件会报异常 Exception in thread "main" java.lang.IllegalArgum ...

  8. O-C相关04:类方法的概述与定义和调用

    类方法的概述与定义和调用 1, 类方法的概述 类方法(class method)在其他编程语言中常常称为静态方法(例如 Java 或 C# 等). 与实例方法不同的是,类方法只需要使用类名即可调用, ...

  9. 图像载入 imread()［OpenCV 笔记4］

    Mat imread( ); filename 载入的图像名: flags 指定加载图像的颜色类型,默认载入三通道彩色图像, 如果取枚举类型 (OpenCV3中暂时失效),则定义如下 enum{ CV ...

  10. 读书笔记之 - javascript 设计模式 - 享元模式

    本章探讨另一种优化模式-享元模式,它最适合于解决因创建大量类似对象而累及性能的问题.这种模式在javascript中尤其有用,因为复杂的javascript代码很快就会用光浏览器的所有可用内存,通过把 ...