我的目标是通过PHP动态显示信息，然后通过AJAX/json进行编辑。我有这个工作的服务器数据的一个实例，但当我进入多个实例，我失去了如何保持元素和div身份不同通过数组在json页面，以及在jQuery的输出在主页上。
这是当前的主页(减去与这个问题无关的PHP记录抓取)。jQuery中的引用不完全正确，例如
data:$("#form_static_").serialize()
，因为它将动态标识符放在我不知道如何处理的static_之后。
<html>
<head>
<title>My Form</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myForm").submit(function(){
$.ajax({
type:"POST",
url:"ajax_form_test2-json.php",
data:$("#form_static_").serialize(),
dataType:"json",
success:function(msg){
$("#formResponse_").removeClass('error');
$("#formResponse_").addClass(msg.status_);
$("#formResponse_").html(msg.message_);
$("#static_name_").html(msg.name_);
$("#static_description_").html(msg.description_);
},
error:function(){
$("#formResponse_").removeClass('success');
$("#formResponse_").addClass('error');
$("#formResponse_").html("There was an error submitting the form. Please try again.");
}
});
return false;
});
});
</script>
</head>
<body>
<div id="tabs-left-2" class="content">
<h1 class="page-title">Static Info</h1>
<?php do { ?>
<div id="static_name_<?php echo $row_rsStatic['id']; ?>" class="small_content_heading"><?php echo $row_rsStatic['name']; ?></div>
<div id="static_description_<?php echo $row_rsStatic['id']; ?>" class="small_content"><?php echo $row_rsStatic['description']; ?></div>
<div id="static_update_<?php echo $row_rsStatic['id']; ?>" style="display:inherit">
<form id="form_static_<?php echo $row_rsStatic['id']; ?>" name="form_static_<?php echo $row_rsStatic['id']; ?>" method="post" action="">
<div id="formResponse_<?php echo $row_rsStatic['id']; ?>"></div>
<div id="form_static_name_<?php echo $row_rsStatic['id']; ?>" class="small_content_heading">
<input name="id<?php echo $row_rsStatic['id']; ?>" type="hidden" value="<?php echo $row_rsStatic['id']; ?>">
<input name="name<?php echo $row_rsStatic['id']; ?>" type="text" value="<?php echo $row_rsStatic['name']; ?>"></div>
<div id="form_static_description_<?php echo $row_rsStatic['id']; ?>">
<textarea name="description<?php echo $row_rsStatic['id']; ?>"><?php echo $row_rsStatic['description']; ?></textarea>
<script>CKEDITOR.replace('description<?php echo $row_rsStatic['id']; ?>');</script>
</div>
</form>
</div>
<hr>
<?php } while ($row_rsStatic = mysql_fetch_assoc($rsStatic)); ?>
</div>
</body>
</html>
这是json页面，再次与各自的"_"后留下的动态标识符，因为我不知道如何使这发生在编程:
<?php
//response array with status code and message
$response_array = array();
//validate the post form
//check the name field
if(empty($_POST['static_name_'])){
//set the response
$response_array['status_'] = 'error';
$response_array['message_'] = 'Name is blank';
//check the message field
} elseif(empty($_POST['static_description_'])) {
//set the response
$response_array['status_'] = 'error';
$response_array['message_'] = 'Description is blank';
//form validated
} else {
//(update record here)
//set the response
$response_array['status_'] = 'success';
$response_array['message_'] = 'Success!';
$response_array['name_'] = $_POST['static_name_'];
$response_array['description_'] = $_POST['static_description_'];
}
echo json_encode($response_array);
?>
我一直在做PHP，但我是AJAX/JSON/jQuery世界的新手，所以不确定这种设置方式是否适合动态生成/更新数据。任何想法或建议都非常感谢……谢谢!
编辑# 1:我将文件更改为以下内容，并且知道我仍然缺少一些东西，因为它不能正确更新:
<html>
<head>
<title>My Form</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("form").submit(function(e){
e.stopPropagation();
var form = $(this); // We're going to use this instead of all those IDs
$.ajax({
type:"POST",
url:"ajax_form_test2-json.php",
data: form.serialize(),
dataType:"json",
success:function(msg){
$(".response", form)
.removeClass('error')
.addClass(msg.status)
.html(msg.message);
$(".name", form).html(msg.name);
$(".description", form).html(msg.description);
},
error:function(){
$(".response", form)
.removeClass('success')
.addClass('error')
.html("There was an error submitting the form. Please try again.");
}
});
return false;
});
});
</script>
</head>
<body>
<div class="small_content_heading name"><?php echo $row_rsSafety['name']; ?></div>
<div class="small_content description"><?php echo $row_rsSafety['description']; ?></div>
<div style="display:inherit">
<form method="post" action="">
<div class="response"></div>
<div class="small_content_heading">
<input name="id" type="hidden" value="<?php echo $row_rsSafety['id']; ?>">
<input name="name" type="text" value="<?php echo $row_rsSafety['name']; ?>">
</div>
<div>
<textarea name="description"><?php echo $row_rsSafety['description']; ?></textarea>
<script>CKEDITOR.replace('description');
function CKupdate(){
for ( instance in CKEDITOR.instances )
CKEDITOR.instances[instance].updateElement();
}
</script>
</div>
<input type="submit" name="submitForm" value="Edit" onClick="CKupdate();">
</form>
</div>
<hr>
</body>
</html>
<?php
//connect to DB
require_once('Connections/job_tool.php');
mysql_select_db($database_job_tool, $job_tool);
//response array with status code and message
$response_array = array();
//validate the post form
//check the name field
if(empty($_POST['name'])){
//set the response
$response_array['status'] = 'error';
$response_array['message'] = 'Name is blank';
//check the message field
} elseif(empty($_POST['description'])) {
//set the response
$response_array['status'] = 'error';
$response_array['message'] = 'Message is blank';
//form validated
} else {
//set update variables
$update_name = $_POST['name'];
$update_desc = $_POST['description'];
$update_id = $_POST['id'];
//update file on server
$sql = "UPDATE static_fields SET name='$update_name', description='$update_desc' WHERE id='$update_id'";
$update_sql = mysql_query($sql, $job_tool) or die('Could not update data: ' . mysql_error());
mysql_close();
//set the response
$response_array['status'] = 'success';
$response_array['message'] = 'Update complete!';
$response_array['name'] = $_POST['name'];
$response_array['description'] = $_POST['description'];
}
echo json_encode($response_array);
?>
与其一直使用id，不如使用jQuery的上下文和类:
<script type="text/javascript">
$(document).ready(function(){
$("form").submit(function(e){
e.stopPropagation();
var form = $(this); // We're going to use this instead of all those IDs
$.ajax({
type:"POST",
url:"ajax_form_test2-json.php",
data: form.serialize(),
dataType:"json",
success:function(msg){
$(".response", form)
.removeClass('error')
.addClass(msg.status);
.html(msg.message);
$(".name", form).html(msg.name);
$(".description", form).html(msg.description);
},
error:function(){
$(".response", form)
.removeClass('success')
.addClass('error')
.html("There was an error submitting the form. Please try again.");
}
});
return false;
});
});
</script>
所以，与其这样:
<div id="static_description_<?php echo $row_rsStatic['id']; ?>" class="small_content"><?php echo $row_rsStatic['description']; ?></div>
你将使用一个类来代替:
<div class="small_content description"><?php echo $row_rsStatic['description']; ?></div>
方法:
- 为div使用泛型类
- 输入使用通用名称
- 在你的PHP
$_POST处理程序中，使用隐藏的ID字段来知道你正在处理的记录 - 在JSON响应中，使用通用的
status,message,name和description键