1

我希望在用户能够创建/读取/更新/删除（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)

  • 只修改 items 数组

  • 收集更新和删除的项目

  • 更新和删除 onUnload/windowClose

  • 结果：更少的服务器请求

伪代码：

<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 插件可以轻松完成这项工作？

提前致谢！

注意：这只是伪代码！

4

1 回答 1

1

一个大帮手是使用data-属性来保存解析其他属性以获取诸如ID, 或者action您在 url 中硬编码的内容（如果页面中没有 JS，请保留在那里），但也有助于在处理程序中访问它。

 /* "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;
})
于 2013-01-02T02:39:06.777 回答