AJAX:如何显示/添加/编辑/删除(CRUD)尽可能多的性能

我想为我的脚本获得更好的性能，其中用户能够创建/读取/更新/删除(CRUD)数据。

目前我在每个操作之后发送一个请求并刷新概览页面。例子:

<a href="script.php?action=save">Add</a>
<table>
    <tr>
        <td>Item 1</td>
        <td>
            <a href="script.php?action=save&id=123">Edit</a>
            <a href="script.php?action=delete&id=123">Delete</a>
        </td>
<table>

<?php
// script.php -> action=delete
$error = true;
if ($this->database->query("DELETE FROM items WHERE id = :id", array("id" => $_GET["id"]))) {
    $error = false; 
}    
// forward back
header("Location: script.php?error=" . $error);
?>

我不喜欢它，想改变它。

你怎么看这个:

• 通过AJAX加载项目(JSON)

• 只修改条目数组

• 收集更新和删除的项目

• 更新并删除onUnload/windowClose

• 结果:less server requests

:

<script>
var items = null; // items
var items_deleted = null; // items, marked to delete
var items_updated = null; // items, marked to be updated
// builds the html table 
function build_html_table() {
    // sort the items
    items = sortTheItems(items);
    html  = "<table>";
    for (i = 0; i < items.length; i++):
        html += '<tr id="'+items[i].id+'">';
        html +=     '<td>'+items[i].name+'</td>';
        html +=     '<td>';
        html +=         '<a href="script.php?action=save&id='+items[i].id+'" class="edit">Edit</a>';
        html +=         '<a href="script.php?action=save&id='+items[i].id+'" class="delete">Delete</a>';
        html +=     '</td>';
        html += "</tr>";
    endfor;
    html += "</table>";
    $("#table").html(html);
}
// on clicking the delete-link
$(".delete").click(function() {
    // get id
    id = $(this).parent().parent().attr("id"); // id of <tr>
    // delete item (temp)
    for (i = 0; i < items.length; i++) 
        if (items[i].id == id) 
            unset(items[i]);
    endfor;
    // mark for deleting
    items_deleted.push(id);
    // re-build table
    build_html_table();
});
// on clicking the edit-link
$(".edit").click(function() {
    // get id
    id = $(this).parent().parent().attr("id");
    // get the item to edit
    item = null;
    for (i = 0; i < items.length; i++):
        if (items[i].id == id)
            item = items[i];
    endfor;
    // fill the save-form
    $("#save_dialog [name='id']").val(item.id);
    $("#save_dialog [name='name']").val(item.name);
    $("#save_dialog [name='content']").val(item.content);
    // open save-form in a dialog
    $("#save_dialog").dialog();
});
// on clicking the add link
$(".add").click(function() {
    // reset the save-form
    $("#save_dialog [name='id']").val("");
    $("#save_dialog [name='name']").val("");
    $("#save_dialog [name='content']").val("");
    // open save-form in a dialog
    $("#save_dialog").dialog();
});
// save form
$("#save_form").onSubmit(function() {
    id = $(this).find("[name='id']");
    if (!id) {
        // real add, getting the new id
        $(this).ajaxForm({
            onSuccess: function(responseText, $form) {
                item.id      = responseText; // script.php?action=save returns the last inserted/updated ID
                item.name    = $form.find("[name='name']");
                item.content = $form.find("[name='content']");
                // add the added item
                items.push(item);
        });            
    } else {
        // temp. update
        // update the old entry
        for (i = 0; i < items.length; i++):
            if (items[i].id == item.id) {
                items[i].name = $(this).find("[name='name']").val();
                items[i].content = $(this).find("[name='content']").val();
                // mark this item to update
                items_updated[items[i].id] = items[i];
            }
        endfor; 
    }
    // re-build table
    build_html_table();        
});
// doc ready
$(function() {
    // get the items data (json)
    items = getJSON("items_json.php");
    // build table
    build_html_table();
});
// on window close/unload (or after $x minutes)
$.unload(function() {
    // real delete 
    ajaxRequest("script.php?action=delete&ids=", items_deleted);
    // real update
    ajaxRequest("script.php?action=update", items_updated);
});
</script>
<a href="script.php?action=add" class="add">Add</a>
<div id="table">loading...</div>
<div id="save_dialog" class="hidden">
    <form action="script.php?action=save" method="POST" id="save_form">
        <input type="hidden" name="id"/>
        Name: <input type="text" name="name"/><br/>
        Content: <textarea name="content"></textarea><br/>
        <input type="submit"/>
    </form>
</div>

你觉得我的主意怎么样?我能做得更好吗?有好的jquery插件可以轻松完成这项工作吗?

提前感谢!

注意:这只是伪代码!

 /* "data-arbitraryName" can be read using jQuery `data()` method*/
 html += '<tr id="'+items[i].id+'" data-id="'+items[i].id+'">';
/* add common class to "controls"*/
'<a href="script.php?action=save&id='+items[i].id+'" class="edit crud_btn" data-action="save">Edit</a>';

/* can now combine a lot in one click handler*/
$('#tableParent').on('click', '.crud_btn', function(e){
      var $btn=$(this), $row=$btn.closest('tr'), row_id= $row.data('id');
       /* data() method reads "data-" attributes*/
      var thisAction=$(this).data('action')
     /* create data object to send*/
     var dataToServer={/* this data always sent*/
          action: thisAction,
          id: row_id || 'add';
     }
      /* additional data as needed based on "action"*/
      if( thisAction == 'add'){
          $.extend( dataToServer, someFormData);
     }
     /* use direct file url, if GET, jQUery will append search string from dataToServer object*/
     $.getJSON('script.php', dataToServer, function(response){
          if( response.success ){  
              /* psuedo update method*/
               updatStoredData( response, action);
               /* success handling based on "action"*/
               if(thisAction=='delete'){
                   $row.remove();
               }
          }
    })
   return false;
})