Question

我一直在寻找一种在前端表单上处理插入与更新过程的好方法。有两种可能的方案，一种是用户要输入新数据并保存该记录的方案。另一个选项是更新现有记录。我过去有一个通用功能来处理此过程。它基于在后端完成插入/更新后传递的唯一ID。现在，我正在寻找可以使用字符串Insert或Update并将其与其余表单数据一起传递的东西。这是我正在谈论的示例：

$('#frmSave').on('submit', submitFrm);
function submitFrm(e){
    e.preventDefault(); // Prevnts default form submit.
    
    var frmObject = $(this),
        frmMessage = $(this).find(".message-submit"),
        keyObj = $("#frmSave_process"),
        formData = frmObject.serialize();
    
    if(formData){  
        frmObject.find(':submit').prop('disabled', true); // Disable submit button
        
        $.ajax({
            type: 'POST',
            url: 'Components/Functions.cfc?method=saveData',
            data: formData,
            dataType: 'json'
        }).done(function(obj){
            if(obj.STATUS === 200){
                  //Here I would need to change parameter hidden value process. So if user decideds to submit the form again, update process should be executed.
   frmMessage.show().addClass(obj.CLASS).html(obj.MESSAGE).delay(7000).fadeOut('slow').queue(function({
                    $(this).removeClass(obj.CLASS).dequeue();
                    frmObject.find(':submit').prop('disabled', false);
                }); 
            }else{
                frmMessage.show().addClass(obj.CLASS).html(obj.MESSAGE).delay(7000).fadeOut('slow').queue(function(){
                    $(this).removeClass(obj.CLASS).dequeue();
                    frmObject.find(':submit').prop('disabled', false); 
                }); 
            }  
        }).fail(function(jqXHR, textStatus, errorThrown){
            alert('Error: '+errorThrown);
        });
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave">
  <input type="hidden" class="form-control" name="frmSave_process" id="frmSave_process">
  <div class="form-group">
    <label class="control-label" for="status"><span class="label label-primary">Status:</span></label>
    <select class="form-control" name="frm_status" id="frm_status" required>
      <option value="0">Inactive</option>
      <option value="1">Active</option>
    </select>
  </div>
  <div class="form-group">
    <label class="control-label" for="name"><span class="label label-primary">Name:</span></label>
    <input type="text" class="form-control" name="frm_name" id="frm_name" maxlength="50" pattern="[a-zA-Z0-9 ][A-Za-z0-9 ]{0,50}$" title="Name allows alphanumeric characters and space - no other special characters" required>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <button type="submit" name="frm_submit" id="frm_submit" class="btn btn-primary">Submit</button>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div id="frm_message" class="alert message-submit"></div>
    </div>
  </div>
</form>

是否有一种很好的方法可以使用JavaScript和JQuery来决定插入与更新过程？

Answer 1

我建议您在服务器上为插入和更新操作创建不同的路由，并在前端根据情况将不同的路由作为 data-url 属性传递给表单用户创建新记录b）用户更新现有的一条记录。

然后，您可能会获得$('#form').attr("data-url")这样的用于ajax调用的URL

通过这种方式，将来更改那些动作或添加新的逻辑将是一种更加灵活的方式，因为这两个动作都不相互依赖。

用ajax处理保存表单过程（插入还是更新）的最佳方法？

1 个答案: