javascript - Jquery 表单元素访问

Question

我是 jquery 的新手，正在尝试执行以下操作:

我有一个表格:

<form method="POST" class="add-product" >
...
<label name="message"></label>
...
</form>

和脚本:

$(document).ready(function() {
$(".add-product").submit(function(e) {
    e.preventDefault();
    var form = this;
    $.ajax({
        type: "POST",
        url: "/product/add/",
        data: $(this).serialize(),
        success: function(data) {
            $(form.elements["message"]).html(data.message);
        }
    });
});

});

我正在尝试用消息更新标签，但它不起作用。似乎我在语法上有一些错误:

$(form.elements["message"]).html(data.message);

Answer 1

问题是因为 label 没有出现在 form.elements 集合中。相反，您需要直接选择它:

$(".add-product").submit(function(e) {
  e.preventDefault();
  var form = this;

  // inside the AJAX callback...
  var data = {
    message: 'Foo bar'
  }
  $(form).find('label[name="message"]').html(data.message);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" class="add-product">
  <label name="message"></label>

  <button>Submit</button>
</form>