0

我的目标是通过 PHP 动态显示信息，然后可以通过 AJAX/json 进行编辑。我有这个为服务器数据的单个实例工作，但是当我进入多个实例时，我迷失了如何通过 json 页面上的数组以及主页面上的 jQuery 输出来保持元素和 div 身份不同页。

这是当前的主页（减去与这个问题 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>

JSON文件：

<?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);


?>
4

1 回答 1

0

不要一直使用 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 使用泛型类
  • 为 INPUT 使用通用名称
  • 在您的 PHP$_POST处理程序中，使用隐藏的 ID 字段来了解您正在使用的记录
  • 在您的 JSON 响应中，使用通用status、message、name和description键
于 2013-03-19T21:52:14.110 回答