jQuery，AJAX和PHP：服務器和客戶端數據上的數組

Question

我的目標是通過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);


?>

Answer 1

與其一直使用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鍵

jQuery，AJAX和PHP：服務器和客戶端數據上的數組

問題描述

1 個解決方案

解決方案1
0 已采納 2013-03-19 21:52:14

jQuery，AJAX和PHP：服務器和客戶端數據上的數組

問題描述

1 個解決方案

解決方案1 0 已采納 2013-03-19 21:52:14

解決方案1
0 已采納 2013-03-19 21:52:14