Question

我在jQuery中有我的表单代码：

$('form.ajax_form').on('submit', function(){
    event.preventDefault();
    var form_errors_space = $(this).find('.ajax_form_errors:first');
    $.ajax({
      type: "POST",
      dataType: 'script',
      url: $(this).attr('action'), 
      data: $(this).serialize(),
      // show success response from server.
      success: function(data, status, jqXHR) {
        console.log(data);
        console.log(status);
        console.log(jqXHR);
      },
      // show error response from the server.
      error: function(data, status, error_message) {
        console.log(data);
        console.log(status);
        console.log(error_message);
        var errors_html = $("<div class='alert alert-danger'><div>");
        // $(errors_html).append('Status code: ' + data.status + '. Message: ' + error_message);
        if (data.status == 422){
          var error_messages = JSON.parse(data.responseText);
          var ul = $('<ul></ul>');
          for (i in error_messages){
            console.log(error_messages[i]);
            var li = $('<li>' + error_messages[i] +'<li>');
            $(ul).append(li);
          }
          $(errors_html).append(ul);
        }
        console.log('some value');
        console.log($(errors_html));
        form_errors_space.html($(errors_html));
        form_errors_space.show();
      }
    });
  });

这会生成以下HTML：

<div class='alert alert-danger'>
  <div></div>
  <ul>
    <li>Content can't be blank</li>
    <li></li>
    <li>Interstitial width can't be blank</li>
    <li></li>
    <li>Interstitial height can't be blank</li>
    <li></li>
    <li>Start date can't be blank</li>
    <li></li>
    <li>End date can't be blank</li>
    <li></li>
    <li>Priority can't be blank</li>
    <li></li>
    <li>Tag can't be blank</li>
    <li></li>
    <li>Is for employees with rewards can't be blank</li>
    <li></li>
  </ul>
</div>

当我期望输出为：

<div class='alert alert-danger'>
  <ul>
    <li>Content can't be blank</li>
    <li>Interstitial width can't be blank</li>
    <li>Interstitial height can't be blank</li>
    <li>Start date can't be blank</li>
    <li>End date can't be blank</li>
    <li>Priority can't be blank</li>
    <li>Tag can't be blank</li>
    <li>Is for employees with rewards can't be blank</li>
  </ul>
</div>

data.responseText的值是：

"["Content can't be blank","Interstitial width can't be blank","Interstitial height can't be blank","Start date can't be blank","End date can't be blank","Priority can't be blank","Tag can't be blank","Is for employees with rewards can't be blank"]"

我在这里做错了什么？

Answer 1

中的错误

var li = $('<li>' + error_messages[i] +'<li>');

应该是

var li = $('<li>' + error_messages[i] +'</li>');

Answer 2

您创建的li没有结束标记，因此您创建了两个<li>元素。然后，浏览器会为您添加结束标记，以尝试维护页面有效性。

改变这个：

var li = $('<li>' + error_messages[i] + '<li>');

对此：

var li = $('<li>' + error_messages[i] + '</li>'); // < note the '/'

或者更好的方法来避免这样的问题：

var li = $('<li />', { text: error_messages[i] });

jQuery追加错误的html元素

2 个答案: