01第一节:概述
#JavaScript#对于jQuery的ajax技术,本身就是一种很轻的数据操作方法,可以通过ajax技术从远程的服务器上拉取数据,这样做就可以实现单向的拿出数据,然后断开连接,剩下的就是在客户端进行操作了,是一种很轻量级的操作数据的方法。
这里使用jQuery的ajax技术+JSON格式的数据+SQL Server数据库来实现数据以表格形式显示的功能。
02第二节:编写ASPX页面后台代码
这里我们通过ajax技术向ASP.NET WebForm编写的后台代码请求数据。
对于ASPX页面,微软使用了巧妙的Web方法标注静态方法可以被远程的Ajax调用。
这里创建一个普通的aspx页面,然后在该页面的*.aspx.cs后台代码中编写一个静态方法,这里需要提前引入Newtonsoft.Json的第三方程序集。
完整C#代码如下:
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.Services;using System.Web.Script.Services;using Newtonsoft.Json;using System.Data;namespace Yidosoft.Edu.JSWeb{public partial class WebForm1 : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}[WebMethod]//对于前台的Get请求,必须使用[ScriptMethod(UseHttpGet=true)],否则出现500错误,//但是对于POST请求,则无需使用[ScriptMethod(UseHttpGet=true)]。[ScriptMethod(UseHttpGet=true)]public static string GetJsonData(){DBHelper db = new DBHelper();DataTable dt = db.GetDataTable("select * from AJAXTable");string str = JsonConvert.SerializeObject(dt);return str;}}}
这段C#代码说明如下:
1:引用命名空间:
using System.Web.Services;
using System.Web.Script.Services;
这两个命名空间是使用脚本请求Web方法的类库。
Newtonsoft.Json是个第三方的JSON处理相关的类库,现在已成为微软的标准。
2:[WebMethod]:
对于被脚本调用的方法,该属性必须在方法上标注。WebMethod存在System.Web.Services名称空间下。
3:静态方法:
对于被脚本调用的方法,也必须是静态的方法。
4:[ScriptMethod(UseHttpGet=true)]:
如果$.ajax()使用的是GET请求,则必须使用[ScriptMethod(UseHttpGet=true)]进行标注,否则会出现HTTP 500错误,存在System.Web.Script.Services名称空间下。
对于POST请求,此标注可以省略。
5:JsonConvert.SerializeObject():
使用该方法可以将任何对象序列化为JSON字符串。
03第三节:编写$.ajax()代码
有了服务器端的后台代码,我们就可以在自己的客户端请求服务器端的数据了。
在Html文件中编写如下客户端代码:
这段Html代码说明如下:
对于调用ASPX页面的静态方法,需要在将方法名写在请求的aspx页面的后面,但不需要圆括号。如:WebForm1.aspx/GetJsonData,WebForm1.aspx是页面,GetJsonData是后台要请求的静态方法。dataType:设置要请求的数据类型,目前已流行JSON数据格式,轻量级,简单。type:设置HTTP请求的类型,可以是GET或POST,当然也可以是PUT、DELETE等。contentType:返回的内容类型,如果设置的dataType是json,则一定要将contentType设置为:application/json,这样才能正确返回json数据。success:表示成功请求后返回的回调函数。具有三个参数:data、status、XHR。获取的数据就在data对象中。error:表示失败请求后返回的回调函数。一般使用一个参数,用于获取错误信息。查看返回的JSON数据正式在Html页面上显示数据之前,我们先测试一下这个GET请求是否成功了,是否能从服务器上拿取数据。
在运行后的页面上点击按钮,然后打开浏览器的控制台窗口,我们看到,已经有了一个object的对象,其中正好是从数据库中获取的数据。
这就是从服务器端返回的JSON字符串。从结果上看,这一堆JSON字符串是存在d属性中的。
所以在success回调函数中,可以直接获取d属性的值:
success: function (data,status,xhr) {console.log(data.d);},
此时,在上图中,以键值对的形式将数据组织在一起,正是一个JSON格式的数据。
在数据库的表中,我们也看到与拿到的数据是一样的。表示使用ajax技术正确在客户端从服务器上拿到数据了。
04第四节:将JSON字符串转换为JSON对象
对于从后台获取的一般都是JSON字符串,什么是JSON字符串呢?就是符合JSON格式的字符串,使用单引号或双引号括起来的。
如:var b = '{"name":"小强","sex":"男","age":"18"}';
就是JSON字符串。
那什么是JSON对象呢?
那就是与JavaScript中的object类型的值是一样的,使用花括号括起来的键值对。如:
var person = { "name": "小华", "sex": "女", "age": "28" }console.log(person.name);
可以使用对象.属性的形式获取对象中某属性的值。
对于从服务器端获取的都是JSON字符串,那么在前端使用JS处理时,就需要转换为JSON对象,以便好处理数据。
使用JSON.parse()方法就可以将JSON字符串转换为JSON对象。
使用JSON.stringify()方法可以将JSON对象转换为JSON字符串。
将上面从数据库中获取的数据转换为JSON对象,如下代码:
var jsonData = JSON.parse(data.d);
非常的简单,然后输出结果:
对于这样的对象,我们再进行处理就容易的多了。
05第五节:将数据呈现在列表中
上面的所有工作都完成之后,我们就可以拿到的数据显示在Html页面上了,用户就可以看到了。
Html+jQuery的完整代码如下:
一都编程,每个知识就是一个案例。
编号 | 姓名 |
将上面的代码运行后,并点击一下“加载数据”按钮,此时数据库中的数据就会按表格的形式显示出来。
此图表中的数据是从数据库中获取的。是动态的数据。通过ajax技术从后台数据库中获取。
因此,我们使用Html+jQuery+Ajax+后台代码就可以轻松的实现获取数据的功能,对于一些数据量小的应用程序,使用这种方式是不错的选择。
举报/反馈