Question

我一直在开发单页应用程序，用户可以在其中运行不同的进程。在某些情况下，这将涉及添加新记录，更新现有记录以及删除记录。我的问题是在前端处理此过程的最佳方法是什么？我试图监视Stack-overflow的工作方式以及它们如何处理这种情况。仍然可以说100％我了解，如果他们使用不同的url还是他们使用提交的表单数据来确定哪个流程应在后端运行。这是一个小例子：

<div class="row">
   <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
       <button type="button" name="new_record" id="new_record">New</button>
   </div>
</div>
<table>
   <thead>
      <tr>
         <th>Name</th>
         <th>Status</th>
         <th>Edit</th>
      </tr>
   </thead>
   <tbody>
      <tr>
        <td>New York</td>
        <td>Active</td>
        <td class="text-center">
           <button class="record_edit">Edit</button>
        </td>
      </tr>
   </tbody>
</table>

在上面的HTML中，您可以看到两个不同的按钮New和Edit。我只在表中显示了一条记录用于测试。所以在这种情况下，我想知道如何在JQuery / JavaScript和Ajax中处理它。这是我的js代码示例：

$('#frmSave').on('submit', submitFrm);
function submitFrm(e){
    var formData = frmObject.serialize();

    $.ajax({
       type: 'POST',
       url: 'Components/Functions.cfc?method=saveData',
       data: formData,
       dataType: 'json'
    }).done(function(obj){
       if(obj.STATUS === 200){
           // Successfully saved.
       }else{
           // Error!   
       }  
    }).fail(function(jqXHR, textStatus, errorThrown){
       alert('Error: '+errorThrown);
    });
}

您可以看到我在“新建”和“编辑”两种情况下都调用了一个函数。在后端，我有两个不同的过程。一种用于插入，另一种用于更新。基于从用户传递的参数，这些参数将在后端确定。我怎么知道我可以使用data-attributes并将该值附加到带有formData名称的url并发送到服务器。有人会说这是不可靠的，我后端的代码将根据表单数据中提交的参数进行插入或更新。我想知道如今对于这种情况有什么好的方法。如何以专业的方式处理？如果有人有好的榜样，请告诉我。还有一件事，我想将这两个进程保留在后端的同一功能中，以防止某些代码冗余。

Answer 1

您可以做些简单的事情

.done(function(obj){
       if(obj.STATUS === 200){
           // Successfully saved.
            $('#main').load("./newContent.cfm");
          }

因此，一旦成功，它将加载newContent页面。

如何确定使用JQuery和Ajax调用哪个函数？

1 个答案: