jquery查询数据显示在html,通过jQuery的AJAX+一般处理程序轻松实现Html页面的查询功能...

01第一节：查询概述

查询功能在每个软件项目中，都是必备的且是相当重要的一个功能，像百度的搜索框，就是一个查询功能，一个查询功能就能够实现百度的核心功能。

查询功能，有的就一个文本框，比较简单，还有的查询条件比较多，查询的更精准，常用于企业内部的系统。

那么查询的核心工作原理是什么呢？

查询其实就是筛选的意思，根据某个字或词语，在数据库中进行有条件的查询，然后将查询到的结果集返回给客户端，这样在客户端上就可以将查询到的结果以各种方式呈现出来。

这里使用jQuery的AJAX技术以异步的方式从SQL Server 2019数据库中查询数据。并呈现在Html页面上。

02第二节：页面布局

我们在Visual Studio 2019 IDE开发工具中，来实现这个功能，下面，创建一个空白项目：

上图是一个空白的Web项目，现在我们创建一个Index.html页面，并编写如下代码：

一都编程，每个知识就是一个案例。

ID

姓名

性别

年龄

在Visual Studio 2019中运行一下上面的Html代码：

运行一下结果：

在上图中，页面上有一个搜索框和一个“查询”按钮，还有一个表头。

这里我们只查询“编号”和“姓名”这2个字段的值，图4中的表头已经做好了，后面只是在此表头下添加行数据即可。

03第三节：服务器端数据源编写

这里，我们使用ASP.NET中的一般处理程序来实现从SQL Server 2019数据库中拉取数据，并使用DBHelper.cs类库作为操作数据库的工具。

在Web项目中创建一个一般处理程序GetStudent.ashx，并在GetStudent.ashx.cs文件中编写如下代码：

using System.Web;using Newtonsoft.Json;namespace Yidosoft.Edu.Search{public class GetStudent : IHttpHandler{DBHelper db = new DBHelper();public void ProcessRequest(HttpContext context){//接收值var keyWord = context.Request["keyWord"];context.Response.ContentType = "text/plain";System.Data.DataTable dataTable = db.GetDataTable($"select * from Student where SName like '%{keyWord}%'");var json = JsonConvert.SerializeObject(dataTable, Formatting.Indented);context.Response.Write(json);}public bool IsReusable{get{return false;}}}}

一般处理程序的C#代码说明如下：

使用了DBHelper数据库操作类库，DBHelper.cs参考如下：NET开发-在DBHelper中封装ADO.NET对象，并调用执行添加数据功能

代码编写在ProcessRequest()方法中，并使用HttpContext作为参数的类型，获取Http上下文对象。使用context.Request["keyWord"];获取从客户端传过来的查询关键字。使用DBHelper.cs类库的GetTable()方法得到查询后的结果集。这里使用了第三方的Newtonsoft对DataTable表数据进行JSON序列化，转换为JSON格式的数据。Newtonsoft可通过NuGet方式添加。测试一下这个一般处理程序是否能正常运行：

在运行的结果中，使用了“小”作为关键字，并查询出来了3行数据，并存放在数组中。

04第四节：使用jQuery的AJAX请求数据

现在，我们在Html代码中编写JS代码，当然，这些JS代码也可以放在单独的*.js文件中，这里为了演示方便，就与html放在一起了。

在Html代码的

头中添加使用jQuery的Ajax技术请求远程数据的代码。

这里我们先写一个基本的AJAX请求，先保证能够请求成功：

一都编程，每个知识就是一个案例。

此JS代码说明如下：

使用jQuery选择器先得到搜索文本框中输入的关键字。然后将关键字放在*.ashx?后面作为参数请求。期望服务器返回的类型是json。使用GET请求方式。$.ajax()的回调函数中，data参数就是请求后返回的JSON数据。这里在控制台上输出。运行一下上面的代码，结果如下：

当我们在文本框中输入查询关键字“小”时，并查询后，得到一个具有3个对象的数组。

这说明我们请求成功，还可以在“Network”中查看请求信息：

此时，请求后返回的状态码是200，表示请求成功了。

剩下的事就是如何将得到的数据在Html页面上显示出来了。

完整的jQuery AJAX代码如下：

好了，上面我们将html代码和jQuery代码全部编写完成了，现在我们运行一下最终的效果：

当在文本框中输入“小”并点击“查询”按钮后，根据姓名开始在数据库中查找，并最后将所有带“小”字的姓名显示出来了。

在上面，通过四个步骤使用AJAX技术在服务器上获取到了表格数据：

先布局好页面效果，主要使用Html+CSS技术。在服务器端编写从数据库获取数据的代码，并转换为JSON格式。使用jQuery的ajax技术从客户端开始向服务器发起GET请求，并将请求后的数据放在

举报/反馈