Javascript 如何使用ajax请求处理向上滚动和向下滚动？
这里我上传了这个链接，您可以看到我的scroll up n down按钮在javascript中是如何工作的，但是现在我正在使用服务器上的php脚本的Ajax请求来检索数据库表中的所有数据。 以下是我所做工作的链接： 除了向上滚动和向下滚动按钮外，一切都很好。 输入第6条记录后，在列表中添加5条记录后，它将显示最新的5条记录 我想让scrollup和down按钮以与myForm.html中相同的方式用于myScrollform.html。任何帮助都会对我有帮助，我非常感激 这是我的密码：Javascript 如何使用ajax请求处理向上滚动和向下滚动？,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,这里我上传了这个链接，您可以看到我的scroll up n down按钮在javascript中是如何工作的，但是现在我正在使用服务器上的php脚本的Ajax请求来检索数据库表中的所有数据。 以下是我所做工作的链接： 除了向上滚动和向下滚动按钮外，一切都很好。 输入第6条记录后，在列表中添加5条记录后，它将显示最新的5条记录 我想让scrollup和down按钮以与myForm.html中相同的方式用于myScrollform.html。任何帮助都会对我有帮助，我非常感激 这是我的密码： <
<html>
<head>
<title>My Scrolling Data Form</title>
<script src="./jquery-1.11.0.min.js"></script>
</head>
<body bgcolor="silver">
<center><h1>My Scrolling Data Form</h1>
<div id="scrollbar">
<input type="button" name="up" id="scrollup" value="Scroll Up" >
<input type="button" name="up" id="scrolldown" value="Scroll Down">
</div>
<div id="mydata" style="height: 200px; overflow-y: scroll">
Currently we have no data
</div>
<hr>
<div id="addformdata">
<form name="addForm" >
To add data to the list, fill in the form below and click on "Add"
<br>
<td><input type="text" id="name" name="namei" value=""></td>
<td><input type="text" id="ssn" name="ssni" value="" ></td>
<td><input type="text" id="date" name="birthi" value="" ></td>
<td><input type="text" id="currency" name="xxxxi" value=""></td>
<input type="button" name="add" value="Add" onclick="validateForm(); return false;">
</form>
</div>
</center>
</body>
</html>
<script type="text/javascript">
// Arrays to store values
var name_Array=new Array();
var ssn_Array=new Array();
var date_Array=new Array();
var currency_Array=new Array();
var Index = 0;
var first = 0;
var last = 0;
var scrolled = 0;
var random_Array=new Array();
$(document).ready(function(){
fetchdata();
$("#scrollup").on("click" ,function(){
// alert('hi');
// scrolled=scrolled+100;
$("#mydata").animate({
scrollTop: 0
}, 800);
});
$("#scrolldown").on("click" ,function()
{
// console.log($elem.height());
$("#mydata").animate({
scrollTop: 5000
}, 800);
});
});
function deleteRecord(id)
{
if(confirm('Are you Sure you Want to delete this record')){
$.ajax({
url:"insdel.php",
type:'POST',
data: {
"action": "delete",
"id": id
},
success:function(data)
{
fetchdata()
console.log('success');
}
});
}
}
function fetchdata()
{
// var scrolled=0
$.ajax({
url:"insdel.php",
type:'POST',
data: {
"action": "fetch"
},
success:function(data)
{
$("#mydata").html('')
$("#mydata").html(data);
console.log('success');
}
});
}
function validateForm()
{
var name = document.getElementById("name");
var ssn = document.getElementById("ssn");
var date = document.getElementById("date");
var currency = document.getElementById("currency");
var error = "";
//Name validation
if(name.value=="")
{
//Check for empty field
name.focus();
error = "Please Enter Name\n";
}
else
{ //format specifier
var letters = /^[a-zA-Z_ ]+$/;
//Check for format validation
if(!name.value.match(letters))
{
name.focus();
error = error + "Name contains only characters and spaces\nPlease Renter Name\n";
}
}
//Date validation
if(date.value=="")
{
//Check for empty field
date.focus();
error = error + "Please Enter Date\n";
}
else
{ //format specifier
var date_regex = /^((((0[13578])|([13578])|(1[02]))[\/](([1-9])|([0-2][0-9])|(3[01])))|(((0[469])|([469])|(11))[\/](([1-9])|([0-2][0-9])|(30)))|((2|02)[\/](([1-9])|([0-2][0-9]))))[\/]\d{4}$|^\d{4}$/;
//check for format validation
if(!date.value.match(date_regex))
{
date.focus();
error = error + "Date must be in mm/dd/yyyy format\nPlease Renter Date\n";
}
}
//SSN validation
if(ssn.value=="")
{
//check for empty field
ssn.focus();
error = error + "Please Enter SSN\n";
}
else
{
//format specifier
var numbers = /^\d{3}((-?)|\s)\d{2}((-?)|\s)\d{4}$/g;
//check format validation
if(!ssn.value.match(numbers))
{
ssn.focus();
error = error + "SSN must be in xxx-xx-xxxx format\nPlease Renter SSN\n";
}
}
//Currency validation
if(currency.value=="")
{
//check for empty field
currency.focus();
error = error + "Please Enter Currency\n";
}
else
{
//format specifier
var pattern = /^(\$)\d+(\.\d{1,3})?$/g ;
//check for format validation
if(!currency.value.match(pattern))
{
currency.focus();
error = error + "Currency must be in $xx.xxx format\nPlease Renter Currency\n";
}
}
if(error)
{
alert(error);
return false;
}
else
{
var name = document.getElementById("name").value;
var ssn = document.getElementById("ssn").value;
var date = document.getElementById("date").value;
var currency = document.getElementById("currency").value;
console.log(name)
adduser(name,ssn,date,currency);
return true;
}
}
function insertToList()
{
// call a function to validate the fields
var valid_function = validateForm();
if(valid_function == false)
{
return false;
}
else
{
//get the entered values from fields
var name = document.getElementById("name");
var ssn = document.getElementById("ssn");
var date = document.getElementById("date");
var currency = document.getElementById("currency");
// push the values in the array
name_Array.push(name.value);
ssn_Array.push(ssn.value);
date_Array.push(date.value);
currency_Array.push(currency.value);
// generate and push random number in the array to search the record in array and then delete that record.
random_Array.push(Math.floor((Math.random()*100)+1));// http://stackoverflow.com/questions/8610635/how-do-you-use-math-random-to-generate-random-ints
//function to insert values to list
InsertValues();
// clear the fields after each add
clearFields();
alert("Record is successfully added to above list.");
// set focus back on the name field
name.focus();
}
}
function clearFields()
{
document.getElementById("name").value = "";
document.getElementById("ssn").value = "";
document.getElementById("date").value = "";
document.getElementById("currency").value = "";
}
// function to add to the list
function InsertValues()
{
var temp = 1,temp1 = 1,index = 0,i=0;
index = name_Array.length - 5;
for(i=0;i< name_Array.length;i++)
{
// when only first 5 entries are added to the list
if(name_Array.length>5)
{
// skip the first values so that only top 5 are shown in the list
if(temp>s)
{
if(temp1==5)
{
last = i;
}
else if(temp1==1)
{
first = i;
Index = i;
}
if(temp1<=5)
{
//initialise values of fields to the list
var str = "name" + temp1;
document.getElementById(str).value = name_Array[i];
str = "ssn" + temp1;
document.getElementById(str).value = ssn_Array[i];
str = "birth" + temp1;
document.getElementById(str).value = date_Array[i];
str = "xxxx" + temp1;
document.getElementById(str).value = currency_Array[i];
str = "random" + temp1;
document.getElementById(str).value = random_Array[i];
}
temp1++;
}
}
else
{
var str = "name" + temp;
document.getElementById(str).value = name_Array[i];
str = "ssn" + temp;
document.getElementById(str).value = ssn_Array[i];
str = "birth" + temp;
document.getElementById(str).value = date_Array[i];
str = "xxxx" + temp;
document.getElementById(str).value = currency_Array[i];
str = "random" + temp;
document.getElementById(str).value = random_Array[i];
}
temp++;
}
}
// Delete a record from the list
function delete_a_Record(record)
{
var remove = 0,i=0,j=1;
var name = document.getElementById("name" + record.value);
var delRecord = document.getElementById("random" + record.value);
if(name.value)
{
remove = 1;
}
// check for the existence of record
if(remove == 1)
{
if(confirm("Click on 'OK' to delete the record\n"))
{
while(i < random_Array.length)
{
if(delRecord.value==random_Array[i])
{
// if yes then remove that record from list
name_Array.splice(i, 1);
ssn_Array.splice(i, 1);
date_Array.splice(i, 1);
currency_Array.splice(i, 1);
random_Array.splice(i, 1);
}
i++;
}
// make entire list empty
while(j <= 5)
{
var str = "name" + j;
document.getElementById(str).value = "";
str = "ssn" + j;
document.getElementById(str).value = "";
str = "birth" + j;
document.getElementById(str).value = "";
str = "xxxx" + j;
document.getElementById(str).value = "";
str = "random" + j;
document.getElementById(str).value = "";
j++;
}
//call this function again to insert values in the list
InsertValues();
record.checked = false;
}
}
else
{
alert("Nothing to delete in this record.");
record.checked = false;
}
}
// function to perform scrollUp n scrollDown
function handleScrolling(type)
{
var j,k,temp2 = 1;
// perform scroll only when there are more than 5 records in the list
if(name_Array.length>5)
{ // scroll up
if(type==1)
{
first--; // decrement the pointer to see upper records
if(first>=0)
{
for (j = first; j < name_Array.length; j++) // its showing top most record from jth position
{
var str = "name" + temp2;
document.getElementById(str).value = name_Array[j];
str = "ssn" + temp2;
document.getElementById(str).value = ssn_Array[j];
str = "birth" + temp2;
document.getElementById(str).value = date_Array[j];
str = "xxxx" + temp2;
document.getElementById(str).value = currency_Array[j];
str = "random" + temp2;
document.getElementById(str).value = random_Array[j];
temp2++;
}
}
else
{
alert("Top of the list is reached\n");
first++;// increment the pointer to see lower records
}
}
else // scroll down
{
// increment the start point to see lower records if any
first++;
if(first<=Index)
{
for (k = first; k < name_Array.length; k++) //its showing bottom most record in the list from kth position
{
var str = "name" + temp2;
document.getElementById(str).value = name_Array[k];
str = "ssn" + temp2;
document.getElementById(str).value = ssn_Array[k];
str = "birth" + temp2;
document.getElementById(str).value = date_Array[k];
str = "xxxx" + temp2;
document.getElementById(str).value = currency_Array[k];
str = "random" + temp2;
document.getElementById(str).value = random_Array[k];
temp2++;
}
}
else
{
alert("Bottom most record is reached\n");
first--;//decrement the pointer to see upper records if any
}
}
}
else
{
alert("Scrolling strikes for records more than 5\n");
return false;
}
}
function adduser(name,ssn,date,currency)
{
$.ajax({
url:"insdel.php",
type:'POST',
data: {
"name": name,
"ssn": ssn,
"date": date,
"currency": currency,
"action": "add"
},
success:function(data){
console.log('success');
fetchdata();
}
});
}
</script>
我的滚动数据表
我的滚动数据表
目前我们没有数据
要向列表中添加数据，请填写下表并单击“添加”
//用于存储值的数组
var name_Array=新数组（）；
var ssn_Array=新数组（）；
var date_Array=新数组（）；
var currency_Array=新数组（）；
var指数=0；
var first=0；
var last=0；
var滚动=0；
var random_Array=新数组（）；
$（文档）.ready（函数（）{
fetchdata（）；
$（“#向上滚动”）。在（“单击”，函数（）{
//警报（“hi”）；
//滚动=滚动+100；
$（“#mydata”）。设置动画({
滚动顶部：0
}, 800);
});
$（“#向下滚动”）。在（“单击”，函数（）
{
//console.log（$elem.height（））；
$（“#mydata”）。设置动画({
滚动顶部：5000
}, 800);
});
});
函数删除记录（id）
{
if（确认（'您确定要删除此记录'））{
$.ajax({
url:“insdel.php”，
类型：'POST'，
数据：{
“行动”：“删除”，
“id”：id
},
成功：功能（数据）
{
fetchdata（）
console.log（'success'）；
}
});
}
}
函数fetchdata（）
{
//var scrolled=0
$.ajax({
url:“insdel.php”，
类型：'POST'，
数据：{
“操作”：“获取”
},
成功：功能（数据）
{
$（“#mydata”）.html（“”）
$（“#mydata”）.html（数据）；
console.log（'success'）；
}
});
}
函数validateForm（）
{
var name=document.getElementById（“名称”）；
var ssn=document.getElementById（“ssn”）；
var date=document.getElementById（“日期”）；
var currency=document.getElementById（“货币”）；
var误差=”；
//名称验证
如果（name.value==“”）
{
//检查是否有空字段
name.focus（）；
error=“请输入名称\n”；
}
其他的
{//格式说明符
变量字母=/^[a-zA-Z_]+$/；
//检查格式验证
如果（！name.value.match（字母））
{
name.focus（）；
error=error+“名称仅包含字符和空格\n请使用租用者名称\n”；
}
}
//日期验证
如果（日期值==“”）
{
//检查是否有空字段
date.focus（）；
错误=错误+“请输入日期\n”；
}
其他的
{//格式说明符
（1[02]2）除了除了除了除了（[1-9-1-9[1-9[0-2-0-2][0-0-2[0-2][0-9[0-2[0-2][0-9[0-2[0-2][0-2[0-2][0-0-0-0-0-9[0-2[0-0-9]）上述上述上述上述上述三方的第三（3[1[1[1[1[1[1[0[1[0[1[1[1[1[1[1[1[0[1[1[1[1[0[1[0[0[1[0[0[0-2[0-2[0-2[0-2[0-2[0-2[0-2][[0-9]0-9]0-9][0-9][0-9]可能可能可能[0-9]））））上述上述上述上述上述上述上述上述上述上述上述上述上述上述上述/；
//检查格式验证
如果（！date.value.match（date\u regex））
{
date.focus（）；
error=error+“日期必须为mm/dd/yyyy格式\n请租用者日期\n”；
}
}
//SSN验证
如果（ssn.value==“”）
{
//检查是否有空字段
ssn.focus（）；
错误=错误+“请输入SSN\n”；
}
其他的
{
//格式说明符
变量数=/^\d{3}（（？）\s）\d{2}（（？）\s）\d{4}$/g；
//检查格式验证
如果（！ssn.value.match（数字））
{
ssn.focus（）；
error=error+“SSN必须采用xxx xx xxxx格式\n请租用者使用SSN\n”；
}
}
//货币验证
如果（货币值==“”）
{
//检查是否有空字段
currency.focus（）；
错误=错误+“请输入货币\n”；
}
其他的
{
//格式说明符
var模式=/^（\$）\d+（\.\d{1,3}）$/g；
//检查格式验证
如果（！currency.value.match（模式））
{
currency.focus（）；
error=error+“货币必须为$xx.xxx格式\n请租用者使用货币\n”；
}
}
如果（错误）
{
警报（错误）；
返回false；
}
其他的
{
var name=document.getElementById（“name”）.value；
var ssn=document.getElementById（“ssn”）.value；
var date=document.getElementById（“日期”）.value；
var currency=document.getElementById（“货币”）.value；
console.log（名称）
adduser（名称、ssn、日期、货币）；
返回true；
}
}
函数insertToList（）
{
//调用函数来验证字段
var有效函数
<?php
extract($_POST);
$con = mysql_connect('localhost', 'root', '');
if (!$con) {
die('Could not connect: ' . mysql_error($con));
}
//mysql_select_db("ripal");
mysql_select_db("test");
//$sql = "SELECT * FROM user WHERE id = '" . $q . "'";
if ($action == 'add') {
$sql = "INSERT INTO myform(name,ssn,date,income)VALUES('" . mysql_real_escape_string($name) . "','" . mysql_real_escape_string($ssn) . "','" . mysql_real_escape_string($date) . "','" . mysql_real_escape_string($currency) . "')";
// echo $sql;
mysql_query($sql);
echo mysql_insert_id();
} else if ($action == 'fetch') {
$sql = "select * from myform";
// echo $sql;
$result = mysql_query($sql);
$str = '<form name="myForm">
<table width="page">
<tr>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"></td>
<td></td>
</tr>';
if (mysql_num_rows($result) > 0) {
while ($row = mysql_fetch_array($result)) {
$id = $row['id'];
$name = $row['name'];
$ssn = $row['ssn'];
$date = $row['date'];
$currency = $row['income'];
$str.='<tr>
<td><input type="radio" id="' . $id . '" name="del" onclick="deleteRecord(this.id);"></td>
<td><input readonly type="text" value="' . $name . '" id="name1" name="name"></td>
<td><input readonly type="text" value="' . $ssn . '" id="ssn1" name="ssn"></td>
<td><input readonly type="text" value="' . $date . '" id="birth1" name="birth"></td>
<td><input readonly type="text" value="' . $currency . '" id="xxxx1" name="xxxx"><input type="hidden" name="random1" id="random1"></td>
</tr>';
}
}
$str.=' <tr>
<td colspan="5" id="scrollCount" align="center" style="padding-top:10px;"> </td>
</tr>
</table>
</form>';
if (mysql_num_rows($result) == 0) {
echo 'No data in Our Database please add one or more';
} else {
echo $str;
}
} else if ($action = 'delete') {
$sql = "DELETE from myform WHERE id=$id";
// echo $sql;
$result = mysql_query($sql);
echo $result;
}
mysql_close($con);