html input 查询mysql

html input 查询mysql,第1张

项目根目录的1文件夹下新建index.php

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>查询</title>

</head>

<body>

<form method="post">

    <input type="text" name="keyword" value="">

    <input type="submit" value="查询">

</form>

<?php

if (isset($_POST['keyword']) && !empty($_POST['keyword'])) {

 $host = "localhost"

 $username = "root"

 $password = "123456"

 $database = "test"

 $mysqli = new mysqli($host, $username, $password, $database)

 if ($mysqli->connect_errno) {

 echo '数据库连接错误'

 exit

 }

 //设置数据库编码格式

 $mysqli->set_charset("UTF8")

 /*编写sql获取分页数据 SELECT*FROM 表名 LIMIT 起始位置,显示条数*/

  

 $keyword = $_POST['keyword']

 $sql = "select b.id,b.name from account a,name b where a.id=b.userid and a.user='" . $keyword . "'"

 /*把sql语句传送到数据库*/

 $query = $mysqli->query($sql)

 echo "<table border='#CCF solid 1px'>"

 echo "<tr><td>ID</td><td>NAME</td></tr>"

 while ($row = $query->fetch_assoc()) {

 echo "<tr><td>" . $row['id'] . "</td><td>" . $row['name'] . "</td></tr>"

 }

 echo "</table>"

 $mysqli->close()

}

?>

</body>

</html>

效果

动态的Ajax分页,代码如下:

<%@ page language="java" contentType="text/html charset=utf-8"

pageEncoding="utf-8"%>

<%

String path = request.getContextPath()

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"

%>

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

<html>

<head>

<base href="<%=basePath %>" />

<meta http-equiv="Content-Type"

content="text/html charset=ISO-8859-1">

<title>Insert title here</title>

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

<script type="text/javascript">

var list // the list of data

var totalPages // the total of pages

var pageSize = 5 // each size of page

var pageIndex = 1 // the index of current page

$(function(){

send()

})

function send() {

$.ajax({

url: "DistrictServlet",

type: "POST",

data: {"function":"list"},

dataType: "json",

success: function(data) {

// list = data

var records  = data.length

if (records % pageSize == 0) {

totalPages = records / pageSize

} else {

totalPages = Math.round(records / pageSize)

}

$("#pageIndex").html(pageIndex)

$("#totalPages").html(totalPages)

binding(data)

}

})

}

function changePage() {

$.ajax({

url: "DistrictServlet",

type: "post",

data: {"function":"list"},

dataType: "json",

success: function(data) {

binding(data)

}

})

}

function binding(data) {

var start = (pageIndex - 1) * pageSize

var end = pageIndex * pageSize

var html = ""

$.each(data, function(index, district) {

if (index >= start && index < end) {

// show data

html += "<tr><td>" + district["id"]+ "</td><td>" +district["name"]+"</td></tr>" // .........

}

})

$("table").html(html)

$("#pageIndex").html(pageIndex)

}

function nextPage() {

pageIndex += 1

if (pageIndex > totalPages) {

pageIndex = totalPages

return

}

changePage()

}

function lastPage() {

pageIndex -= 1

if (pageIndex < 1) {

pageIndex = 1

return

}

changePage()

}

function skipPage(index) {

pageIndex = index

changePage()

}

</script>

</head>

<body>

<div><span id="pageIndex"></span>/<span id="totalPages"></span></div>

<div>

<a href="javascript: lastPage()">last</a>

<a href="javascript: nextPage()">next</a>

</div>

<div id="list"><table></table></div>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6151008.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-16
下一篇 2023-03-16

发表评论

登录后才能评论

评论列表(0条)

保存