MVC $.Ajax()+Json实现数据库访问并显示数据
我们在使用搜索引擎时经常会看到这样一个效果
在输出输入相关文字时会有与之对应的相关提醒，作为一个MVC初学者我也做了一个简单版的“搜索工具”，分享给初学mvc和ajax的童鞋（各位大神勿喷），也加深我对代码的理解
第一部数据部分：数据库部分，你可以自己建一张表，然后加几条数据就可以了，我在此用的是我自己做的一个测试系统的试题表
第二部 就是代码编写部分了，mvc Model部分我没有运用Linq或EF，而是运用了DBhelp类访问数据库，这样更易于初学者理解，下图Topic为上图的表类
后台代码：DBhelp相信大家都会写，这里我就不多说了
Model：Topic
public class Topic
{
public int T_ID { get; set; }
public string T_Title { get; set; }
public string T_AnswerA { get; set; }
public string T_AnswerB { get; set; }
public string T_AnswerC { get; set; }
public string T_AnswerD { get; set; }
public string T_Answer { get; set; }
public int C_CourseID { get; set; }
public string C_CourseName { get; set; }
}
Controllers代码
Models.DBhelp help = new Models.DBhelp();
DataTable table = new DataTable();
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(int? Tid)
{
table = help.getDataTable(string.Format(@"select * from Topic inner join Course
on Topic.C_CourseID=Course.C_C_CourseID
where T_ID='{0}'", Tid));
if (table.Rows.Count > )
{
List<Models.Topic> list = new List<Models.Topic>();
foreach (DataRow item in table.Rows)
{
Models.Topic T = new Models.Topic();
T.T_ID = Convert.ToInt32(item["T_ID"]);
T.T_Title = item["T_Title"].ToString();
T.T_AnswerA = item["T_AnswerA"].ToString();
T.T_AnswerB = item["T_AnswerB"].ToString();
T.T_AnswerC = item["T_AnswerC"].ToString();
T.T_AnswerD = item["T_AnswerD"].ToString();
T.T_Answer = item["T_Answer"].ToString();
T.C_CourseID = Convert.ToInt32(item["C_CourseID"]);
T.C_CourseName = item["C_CourseName"].ToString();
list.Add(T);
}
/*如果有多张表最好将集合转换为JsonResult对象*/
//JsonResult json = new JsonResult
//{
// Data = list
//};
return Json(list);
}
else
{
return Json("No");
}
}
前台代码
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.validate-vsdoc.js"></script>
<script type="text/javascript">
$(function () {
$("#text").bind("keyup", function () {
if ($("#text").val() == "") {
$("#showDiv").empty();//清空标记类容
return;
} else {
$.ajax({
type: "post",
url: "/Home/Index",
data:
{
Tid: $("#text").val()
},
datatype: "json",
success: function (data) {
if (data == "No") {
$("#showDiv").text("非法数据");
}
else {
var strHTML = "";
$("#showDiv").empty();
//用$.each方法解析获取到的Json
//$.each(data, function (i, Que) {
// strHTML += "编号" + Que["T_ID"] + "<br/>";
// strHTML += "科目" + Que["C_CourseName"] + "题目" + Que["T_Title"] + "<br/>";
// strHTML += "A:" + Que["T_AnswerA"] + "<br/>";
// strHTML += "B:" + Que["T_AnswerB"] + "<br/>";
// strHTML += "C:" + Que["T_AnswerC"] + "<br/>";
// strHTML += "D:" + Que["T_AnswerD"] + "<br/>";
// strHTML += "答案：" + Que["T_Answer"] + "<br/>";
//});
//用for循环解析获取到的Json
for (var i = , length = data.length; i < length; i++) {;
strHTML += "编号" + data[i].T_ID + "<br/>";
strHTML += "科目" + data[i].C_CourseName + "\
<br/>题目" + data[i].T_Title + "<br/>";
strHTML += "A:" + data[i].T_AnswerA + "<br/>";
strHTML += "B:" + data[i].T_AnswerB + "<br/>";
strHTML += "C:" + data[i].T_AnswerC + "<br/>";
strHTML += "D:" + data[i].T_AnswerD + "<br/>";
strHTML += "答案：" + data[i].T_Answer + "<br/>";
}
$("#showDiv").html(strHTML);
}
}
});
}
})
});
</script>
<title>Index</title>
</head>
<body>
<div id="textDiv">
<input type="text" id="text" />
</div>
<br />
<div id="showDiv"></div>
</body>
</html>
完成后的效果是这样的,输入对应的试题编号，就会无刷新的显示对应试题信息
当然你会说这个效果与搜索引擎的效果相差甚远，但是当你仔细分析两者之间的原理时，你会发现这就是一个简单的搜索引擎效果，任何东西都是由简到复杂的，在学习编程时，我们只有弄懂一段段简单的代码的原理，才能在实践过程中更好的去理解和操作代码
MVC $.Ajax()+Json实现数据库访问并显示数据的更多相关文章
- jquery ajax json简单的分页，模拟数据，没有封装，只显示原理
简单的分页,模拟数据,没有封装,显示原理,大家有兴趣可以自己封装,这里只是个原理过程,真正的分页也差不多是这个原理,只是请求数据不太一样,html部分: <!TOCTYPE HTML> & ...
- Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图
http://my.oschina.net/xshuai/blog/345117?fromerr=hEXYMdR0 http://www.oschina.net/code/snippet_144464 ...
- 初探Node-red结合阿里云数据库，定时显示数据
在最近的项目中,隔壁项目组推荐了一个很好的基于node.js开源IOT框架Node-Red,它的优点很明显,使用可视化编程的方式,实现了大部分需要在物联网领域的技术,而且能很好的对接各个云平台,快捷部 ...
- Oracle DBLink跨数据库访问SQL server数据同步 踩坑实录
项目需求:这里暂且叫A公司吧,A公司有一套人事管理软件,需要与我们公司的软件做人员信息同步,A公司用的是SQL server数据库,我们公司用的Oracle,接口都不会开发(一万句"fuck ...
- 基于MVC4+EF5.0+Ajax+Json+CSS3的简单注册页面（get&post）
使用mvc4可以很快速的创建页面,但封装的过多,难免会有些性能上的问题.所以基于此,通过使用简单的手写html,加ajax,json来创建一个注册页面,会比较干净,简洁. 本项目的环境是MVC4+EF ...
- Django+Ajax+Mysql实现数据库数据的展示
最近老师让搞一个系统,仅仅展示一下数据库的数据 在做海底捞时,是交接的师兄的项目,用的语言是java,框架是SSM(Spring.SpringMVC.MyBatis),这次我准备用Python写,前端 ...
- AJAX && JSON之讲解
Ajax技术的核心是XMLHttpRequest对象(简称XHR),可以通过使用XHR对象获取到服务器的数据,然后再通过DOM将数据插入到页面中呈现.虽然名字中包含XML,但Ajax通讯与数据格式无关 ...
- Django 之Ajax&Json&CORS&同源策略&Jsonp用法
什么是Json 定义: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范)的一个子集 ...
- jQuery +ajax +json+实现分页
正文 首先我们创建一般处理程序,来读取数据库中内容,得到返回值. 创建文件,GetData.ashx. 我这里是用的存储过程,存储过程会再下面粘出来,至于数据只是实例,你们可根据需求自行读取数据 代码 ...
随机推荐
- java8 学习之路之lambda
前言 目前我们知道java的版本已经发布到12了,之前的项目用的是JDK1.7,听说JDK1.8的改动相对来说大一些,因此抽空学学JDK1.8的一些新特性.本人也是通过阅读Java8实战这本书做一些小 ...
- java 实现 HTTP请求（GET、POST）的方法
使用Java进行服务调用时,避免不了要使用模拟HTTP请求来实现模拟,我在开发过程中恰巧遇到了这类的业务需求,所以就对这类的方法进行了一次总结,原理层次的东西暂时不考虑,毕竟HTTP的底层实现啥的,东 ...
- elasticsearch(六) 之 elasticsearch优化
目录 elasticsearch 优化 从硬件上 : 从软件上: 从用户使用层 elasticsearch 优化 从硬件上 : 使用SSD 硬盘,解决io导致的瓶颈. 增大内存 但不超过32G(单实例 ...
- springcloud-02-eureka
在dubbo项目中(http://www.cnblogs.com/wenbronk/p/6774539.html), 我们使用了zookeeper作为集群的注册中心, 在springcloud中, 也 ...
- Beta阶段——Scrum 冲刺博客第一天
一.当天站立式会议照片一张 二.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中 昨天已完成的工作 今日是Beta冲刺第一天,昨日没有完成的工作 今天计划完成的工作 实现对i ...
- MCS锁和CLH锁
CLH锁:自旋锁,在上一个节点上等待,先上代码: public class CLHLock { /** * 保证原子性操作 * */ private AtomicReference<Node&g ...
- webpack3+node+react+babel实现热加载(hmr)
前端工程化开发的一个重要标志就是热替换技术,它大大的提高开发效率,使我们专注于写代码,webpack3中的热替换相比较1更加简洁. 1. 先看效果 Demo地址 https://github.com/ ...
- [转]Lost parameter value during SQL trace in EF Core DbParameter 为 问号 ?
本文转自:https://stackoverflow.com/questions/44202478/lost-parameter-value-during-sql-trace-in-ef-core 问 ...
- Ionic CLI 升级到最新版本
由于Ionic 自身也在不停的更新当中, 所以开发者经常会遇到从官方的CLI 命令,在命令行窗口中执行出错的情况. 就比如我一个月之前安装的ionic 2.2.2版本,已不能使用最新的3.2.0 CL ...
- UIWebView 展示GIF/image
代码: [web loadData:self.gifDataArr[index] MIMEType:@"image/gif" textEncodingName:@"&qu ...