投稿
  1. 首页
  2. sql

如何使用ajax读取数据库中的数据

vivaldi•2023-3-28•sql•阅读21

如何使用ajax读取数据库中的数据,第1张

function test(bid){

$.ajax({

type:"GET",

url:"/test.php?ac=ss&bid="+bid+"&date=" + new Date(),

success: function(data){

alert(data)

}

})

}

给你发一个简单例子，test.php去获取数据库内容，可以返回不同的数据，如一般的text,也可以是json等多种类型，接收的时候需要做不同的处理

记得在此之前一定先调用JQ库，这是JQ的AJAX方法，个人理解，不专业

dataTables是一种很好用前端表格显示库。当加载大量数据时，可以用Ajax 获取数据来提高效率，增速网页加载速率。下面以一个例子作示范。

首先，需要下载jquery以及dataTables库。这里使用的是版本是jQuery v1.11.3和DataTables 1.10.9。下载网址：http://datatables.net/。

先上网页的代码。要注意的是，table中的thead和tbody必须要有。

[html] view plaincopy

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">

<head>

<link href="http://www.zhuhaihengxin.com/libs/datatables/1.10.0/css/jquery.dataTables.css" rel="stylesheet">

<title>dataTable example</title>

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

<script type="text/javascript" src="jquery.dataTables.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$("#datatable").dataTable({

"processing" : true,

"serverSide" : true,

"paginationType":"full_numbers",

"ajax" : "load",

"columns" : [

{"data" : "id"},

{"data" : "firstName"},

{"data" : "lastName"}

]

})

})

</script>

<style>

h2{

text-align:center

}

div {

float: left

margin: 10px

padding: 4px

}

a{

margin:5px

}

table,tr,td,th{

border:2px solid #3aec7b

border-collapse:collapse

}

</style>

</head>

<body>

<TABLE id="datatable">

<THEAD>

<tr>

<th>ID</th>

<th>First Name</th>

<th>Last Name</th>

</tr>

</THEAD>

<tbody>

</tbody>

</TABLE>

</body>

</html>

当网页加载的时候，ajax发出请求，如下所示。

[html] view plaincopy

draw=[1]

columns[0][data]=[id]

columns[0][name]=[]

columns[0][searchable]=[true]

columns[0][orderable]=[false]

columns[0][search][value]=[]

columns[0][search][regex]=[false]

columns[1][data]=[firstName]

columns[1][name]=[]

columns[1][searchable]=[true]

columns[1][orderable]=[true]

columns[1][search][value]=[]

columns[1][search][regex]=[false]

columns[2][data]=[lastName]

columns[2][name]=[]

columns[2][searchable]=[true]

columns[2][orderable]=[true]

columns[2][search][value]=[]

columns[2][search][regex]=[false]

order[0][column]=[0]

order[0][dir]=[asc]

start=[0]

length=[10]

search[value]=[]

search[regex]=[false]

_=[1441278114568]

其中，draw是请求的序号，start是数据的偏移量，length是需要返回的最大数据条数。search[value]是查找的值。

服务端采用java的servlet完成。为简单起见，这里直接采用继承HttpServlet的方式实现。数据本应该从数据库中提取，但这里为了

简单，生成了静态数据集合作为数据源。每次请求都从集合中查找匹配的数据，然后转换成JSON返回。JSON库采用阿里的fastjson。

代码如下所示。

[java] view plaincopy

package jspTest

import java.io.IOException

import java.util.ArrayList

import java.util.Arrays

import java.util.Enumeration

import java.util.LinkedList

import java.util.Random

import javax.servlet.ServletException

import javax.servlet.annotation.WebServlet

import javax.servlet.http.HttpServlet

import javax.servlet.http.HttpServletRequest

import javax.servlet.http.HttpServletResponse

import com.alibaba.fastjson.JSON

import com.alibaba.fastjson.JSONObject

import java.util.List

import java.util.Map

/**

* Servlet implementation class DataLoad

*/

public class DataLoad extends HttpServlet {

private static final long serialVersionUID = 1L

static class Person {

private long id

private String firstName

private String lastName

public long getId() {

return id

}

public void setId(long id) {

this.id = id

}

public String getFirstName() {

return firstName

}

public void setFirstName(String firstName) {

this.firstName = firstName

}

public String getLastName() {

return lastName

}

public void setLastName(String lastName) {

this.lastName = lastName

}

public boolean match(String pattern) {

return firstName.contains(pattern) || lastName.contains(pattern) || Long.toString(id).contains(pattern)

}

}

private static Random r = new Random()

private static List<Person>ps = new ArrayList<Person>()

static {

int size = 2512

for (int k = 0k <size++k)

ps.add(generatePerson())

}

static Person generatePerson() {

Person p = new Person()

p.setId(ps.size() + 1)

p.setFirstName(generateName())

p.setLastName(generateName())

return p

}

private static String generateName() {

StringBuilder sb = new StringBuilder()

sb.append((char) (r.nextInt(26) + 'A'))

int len = 2 + r.nextInt(4)

for (int k = 0k <len++k)

sb.append((char) (r.nextInt(26) + 'a'))

return sb.toString()

}

private List<Person>result

public List<Person>getResult(){

return result

}

/**

* @see HttpServlet#HttpServlet()

*/

public DataLoad() {

super()

}

/**

* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse

* response)

*/

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

int start=0

int length=10

String pattern=""

String draw="1"

Map<String,String[]>params=request.getParameterMap()

for(String attr:params.keySet()){

String[] val=params.get(attr)

System.out.println(attr+"="+Arrays.toString(val))

if(attr.equals("start"))

start=Integer.parseInt(val[0])

if(attr.equals("length"))

length=Integer.parseInt(val[0])

if(attr.equals("search[value]"))

pattern=val[0]

if(attr.equals("draw"))

draw=val[0]

}

int total=filter(start, length, pattern)

JSONObject obj = new JSONObject()

obj.put("draw", draw)

obj.put("recordsTotal", ps.size())

obj.put("recordsFiltered", total)

System.out.println(obj.toJSONString())

obj.put("data", result)

response.getWriter().println(obj.toJSONString())

}

/**

* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse

* response)

*/

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

doGet(request, response)

}

private int filter(int start,int length,String pattern){

result=new LinkedList<Person>()

int total=0

for(Person s:ps){

if(!s.match(pattern))

continue

++total

if(start-->0)

continue

if(length--<=0)

continue

result.add(s)

}

return total

}

public static void main(String[] rags) {

System.out.println(JSON.toJSONString(ps))

DataLoad load=new DataLoad()

load.filter(0, 10, "")

System.out.println(JSON.toJSONString(load.getResult()))

load.filter(0, 10, "a")

System.out.println(JSON.toJSONString(load.getResult()))

load.filter(10, 10, "a")

System.out.println(JSON.toJSONString(load.getResult()))

load.filter(20, 10, "a")

System.out.println(JSON.toJSONString(load.getResult()))

}

}

服务端返回的JSON数据如下所示。其中draw是请求中的draw参数，data是表格中的数据。recordsFiltered是过滤后的数据总数，recordsTotal是原始数据总数。

[html] view plaincopy

{"recordsFiltered":2512,

"data":[{"firstName":"Bzf","id":1,"lastName":"Hazkm"},{"firstName":"Imxi","id":2,"lastName":"Oieb"},{"firstName":"Glyag","id":3,"lastName":"Gvqlf"},{"firstName":"Lwbhl","id":4,"lastName":"Fvvf"},{"firstName":"Audds","id":5,"lastName":"Seunp"},{"firstName":"Otbrq","id":6,"lastName":"Hnal"},{"firstName":"Loji","id":7,"lastName":"Qicn"},{"firstName":"Rjy","id":8,"lastName":"Emrygr"},{"firstName":"Gcglkd","id":9,"lastName":"Ldgrs"},{"firstName":"Txh","id":10,"lastName":"Qwe"}],

"draw":"1",

"recordsTotal":2512}

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/sjk/6776092.html

赞 (0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
vivaldivivaldi一级用户组
00
上一篇 2023-03-28
下一篇2023-03-28

发表评论

登录后才能评论

评论列表（0条）

    保存