Question

是否可以设置表单操作以使用主键参数调用url。我有以下jQuery：

$('#chatbox').on('show.bs.modal', function(event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  $.ajax({
    url: "{% url 'fetcher' %}",
    data: {
      'search': recipient
    },
    dataType: 'json',
    success: function(data) {
      list = data.list;
      id = data.id;
      $('#chatbox').find('.modal-body').text(id)
      $('#formid').get(0).setAttribute('action', "{% url 'usercreation:addmessage'  %}");

    }
  });
  var modal = $(this)
  modal.find('.modal-title').text('Chat with ' + recipient)
})

我需要在ajax的成功响应中包括“ id”，作为传递给操作表单的主键。类似于{％url'usercreation：addmessage'id％} 有什么办法吗？

编辑：

AJAX响应：

   {'list': 'go358938: hi\r\ngo358938: heyyy\r\nraman: whatuppp\ngo358938: nm, you tell ?\ngo358938: im good \ngo358938: yoo\ngo358938: hello\ngo358938: hello\ngo358938: hi\ngo358938: a', 'id': 35}

Answer 1

好像您的JSON格式错误，需要使用"双引号而不是'单引号。您还遗漏了type的{{1}}要求，例如（Ajax）。我整理了一个模拟示例，将您的POST, GET回复回来，并将JSON设置为返回的form action。这是您要找的吗？

data.id

$.ajax({
  url: "https://api.myjson.com/bins/xp74s", // sample test to get JSON response
  type: "GET",
  data: {
    "search": ""
  },
  dataType: "json",
  success: function(data) {
    console.log(data);
    var list = data.list;
    var id = data.id;
    //$('#chatbox').find('.modal-body').text(id);
    //$('#formid').get(0).setAttribute('action', "{% url 'usercreation:addmessage'  %}");
    $('#formid').attr("action", "{% url 'usercreation:addmessage' " + id + " %}"); // sets the value of the action, need to add your django code back here, etc.
    console.log($('#formid').attr('action')); // shows what the value is after being set
  }
});

Answer 2

您可以通过多种方式轻松地将表单操作attr用作ajax url。

jQuery("#youfrmid").submit(function(e) {
      e.preventDefault(); // avoid to execute the actual submit of the form.
      var form = jQuery(this);
      let formData = jQuery(this).serialize();
      var url = form.attr('action');
      jQuery.ajax({
        type: "POST",
        url: url,
        headers: {'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')},
        //processData: false,
        //contentType: false,
        data: formData,
        dataType: "json",
        success: function(res)
        {
           // do whatever you want after success
        }
      });
});

HTML格式

<form id="youfrmid">
</form>

使用jQuery设置表单动作

2 个答案: