jq ajax 发json数据库,使用jQuery的ajax技术+JSON数据格式+C＃+SQL Server实现数据显示...

最新推荐文章于 2024-08-01 15:56:04 发布

weixin_39629679

最新推荐文章于 2024-08-01 15:56:04 发布

阅读量240

点赞数

文章标签： jq ajax 发json数据库

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请求是否成功了，是否能从服务器上拿取数据。