作为一个雄心勃勃的梦想:S我想通过一个小地址簿项目来学习AJAX。我的想法是有一些IPAD风格的东西,在左边是一个联系人列表,当你选择一个时,屏幕的另一部分会填写联系人表单,以便能够更改或显示它。
我的SQL结构是:Contact | Address | Email
id id id
contact_first address1 email
contact_sur address2
contac_mobil town
email_id postcode
address_id country
我并没有要求别人帮我写——那就太愚蠢了:)但是我要求社区给我一些东西,这样我就可以理解并把它们放在一起——更重要的是,我可以在以后修改甚至扩展——一些我将作为家庭作业进行测试的东西。如果可能的话,我想建立一个"最佳实践"解决方案。
希望这个愚蠢的游戏可以在这里容纳。
如有任何意见,我将不胜感激。
addressbook.php -我的初始地址
<?php
include("db_con1.php");
// left side people list
$peoplelist='SELECT contact_first, contact_sur, contact_mobil FROM contactmain WHERE status=1';
$queryl = $pdo->prepare($peoplelist);
$queryl->execute();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Email sending program</title>
<link rel="stylesheet" type="text/css" href="css/adminolok.css">
<link rel="stylesheet" type="text/css" href="css/menu.css">
</head>
<body>
<?php include("menu.php"); ?>
<div id="leftnavigation">
<ul>
<?php foreach ($queryl as $i => $rowl) { ?>
<li >
<label for="contact_<?php echo $i; ?>">
<span class="name">
<?php echo $rowl['contact_first'].' <strong>'.$rowl['contact_sur'].'</strong>'; ?>
</span>
<br />
<span class="mobil"><?php echo $rowl['contact_mobil'];?></span>
</label>
<?php }?>
</li>
</ul>
</div>
<div id="midtop">
<form method="post" action="test.php">
<ul>
<li><label class="description">Name</label>
<div>
<input type="text" name="first" /><label class="fieldname">First</label>
<input type="text" name="first" /><label class="fieldname">Surname</label>
</div>
</li>
<li><label class="description">Mobil</label>
<div>
<input type="text" name="mobil" /><label class="fieldname">mobil num</label>
</div>
</li>
<li><label class="description">Email</label>
<div>
<input type="text" name="email" /><label class="fieldname">email</label>
</div>
</li>
<input type="submit" name="save">
</form>
</div>
</body>
</html>
更新日志:)
- 我有一个Jquery()刷新的答案-谢谢
- 左侧问题:
1,如果你有一个有限的屏幕(IPAD),你有3000个联系人的名字,最好在列表中显示他们?
2,如果你需要滚动,你如何确保它也能在iOS/Android上工作?
- 测试1进行得很顺利,所以我正在修复所有的打字错误-工作到目前为止
- 下一个问题:如何将记录传递到表单的右侧面板?
如有任何答复,不胜感激
我假设您不希望在页面上刷新(只有ajax请求)
我建议你使用jQuery,这样ajax请求更容易做,我将在我的例子中使用jQuery
我是这样写的:
当你点击一个联系人,得到这个联系人的详细信息ajax(地址,城镇等),并显示在右边的形式:
$("#leftside label").click(function() {
$.get('getContactInfo.php?contact=' + $(this).attr('for'), function(data) {
$('#rightside').html(data);
});
});
当您提交右边的表单时,发送一个ajax请求来修改已编辑的联系人/地址/电子邮件。别忘了更新左边的信息。
$('#myform').submit(function() {
$.ajax({
type: "POST",
url: "editContactInfo.php",
data: $("#myform").serialize()
success: function(msg) {
// here you have to update the submited info in the left side
}
});
});