jQuery + x-editable：动态 url ajax？答案

【问题标题】：jQuery + x-editable: dynamic url ajax?jQuery + x-editable：动态 url ajax？
【发布时间】：2018-07-23 19:19:31
【问题描述】：

我正在使用x-editable 编辑内容。在官方文档中它说“打开您的页面并单击元素。输入新值并提交表单。它将向/post发送带有新值的ajax请求”。

这是我想做的，但是我的网址是动态的。我想知道如何生成动态网址？

这是显示内容和可编辑启用的 UI：

现在我只要在浏览器中输入http://localhost:5055/update/department?id=55&name=yoo，我的UI上的相应内容就会更新。问题是每个数据都有不同的id和不同的名称，所以url会是动态的/update/department?id=dynamicID&name=newvalue

如何使用 x-editable 生成动态 URL？

目前我在我的<a> 中添加data-url="/update/department?id=${department.optString("departmentId")}&name="，但无法弄清楚如何设置name=。

在我的 js 文件中，我尝试了：

$('.to-be-edited').editable({
    toggle: 'manual',
    //submit data without pk please set send option to "always".
    //send: 'always',
    url: '$(this).data("url") + newValue',
    success: function(res, newValue) {
      console.log(newValue)
    }

  })

我得到一个错误： POST http://localhost:8000/update/department?id=55&name= 405 (Method Not Allowed)

渲染表格的代码

        <c:if test="${departments.length() > 0}">
          <c:forEach var="i" begin="0" end="${departments.length()-1}">
          <c:set var="department" value="${departments.getJSONObject(i)}"/>
            <tr>
              <td><a href="#"
                class="to-be-edited department-name" data-type="text"
                data-pk="${department.optString("departmentId")}" 
                id="${department.optString("departmentId")}" 
                data-url="/update/department?id=${department.optString("departmentId")}&name=">${department.optString("departmentName")}</a><i class="fa fa-pencil-square-o fa-fw pencil-edit-name" aria-hidden="true"></i></td>
              <td> <a href="#" class="edit-name">Edit Name</a> </td>
            </tr>
          </c:forEach>
        </c:if>

【问题讨论】：

标签： jquery x-editable

【解决方案1】：

这就是我最终要做的。首先，我将object-type="something" 添加到<a> 标签。这是一个重要的属性，因为其他页面将使用相同的功能，所以url 必须是动态的。例如在部门页面：

<a href="#"
   class="to-be-edited department-name" data-type="text"
   data-pk="${department.optString("departmentId")}" 
   id="${department.optString("departmentId")}"
   object-type="department"
>

在供应商页面中：

<a href="#"
   class="to-be-edited vendor-name" data-type="text"
   data-pk="$${vendor.optString("vendorId")}" 
   id="$${vendor.optString("vendorId")}"
   object-type="vendor"
>

然后，在我的js中，创建一个成功函数，生成url，然后在成功函数里面写ajax

$('.to-be-edited').editable({
    toggle: 'manual',
    success: function(something, data) {
      //generate dynamic url for ajax
      let url = "/update/" + $(this).attr('object-type') + "?id=" + $(this).attr('id') + "&name=" + data;
      $.ajax({
        url: url,
        //http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings
        //communication successful with server, check the status
        success: function ajaxSuccess(data, textStatus, jqXHR) {
          let json = JSON.parse(data);
          if (json["status"] === "success") {
            //content will update on server side
            console.log(data);
          } else {
            alert('Unable to update, try again later. ' + json["reason"]);
            return;
          }
        },
        //unable to communicate with server
        error: function communicationError(jqXHR, textStatus, errorThrown) {
          alert('Unable to update, try later. ' + errorThrown);
        }
      });
    }
  });

【讨论】：