Question

我有一个填写了出生日期的表格。当我从php脚本获得响应时，我想显示错误消息。我的php脚本运行良好，当有多个元素作为数组时，我得到响应。这样。

    label   value
0   S       1
1   S       2

这是我的HTML

username = request.session['username']
sent_msg = Message.objects.filter(sender= username).values()
for i in sent_msg:
    print(i.sender)
    print(i.message)
return render(request, 'mes.html',{'sent_msg': sent_msg})

我只想在响应为0的元素上显示错误消息。此刻在所有元素上显示的错误消息，甚至某些元素的响应代码为1。我想分别验证每个字段，并且应该在错误消息上显示具有代码：0的元素。

这是我的JS代码

{% for i in sent_msg %}
   {% if i.action_view == 0 %}
        <p>{{ i.sender }}</p>
        <p>{{ i.recipient }}</p>
        <p>{{ i.message }}</p>
   {% endif %}
{% endfor %}

直到切换类，我的代码才能正常工作，只有错误消息未显示我想要的方式。它只能在响应代码为0的元素上。

Answer 1

您需要使用普通JS的forEach

由于消息为“ 1”时为空，因此我们应该利用该消息并用该空字符串填充跨度

const parseJson = [{
  code: 0,
  message: "Please fill valid date of birth."
}, {
  code: 1,
  message: "OK" // or blank
}]

const items = document.querySelectorAll(".stepbirthVal");
parseJson.forEach((response, i) => items[i].innerHTML = response.code === 0 ? response.message : "");

// OR just
// parseJson.forEach((response, i) => items[i].innerHTML = response.message);

<input class="date_of_birth" name="date[]" type="text" value="" />
<span class="stepbirthVal"></span>
<hr/>
<input class="date_of_birth" name="date[]" type="text" value="" />
<span class="stepbirthVal"></span>

jQuery：

const parseJson = [{
  code: 0,
  message: "Please fill valid date of birth."
}, {
  code: 1,
  message: ""
}]

const $items = $(".stepbirthVal");
$.each(parseJson,(i,response) => $items.eq(i).html(response.message))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="date_of_birth" name="date[]" type="text" value="" />
<span class="stepbirthVal"></span><hr/>
<input class="date_of_birth" name="date[]" type="text" value="" />
<span class="stepbirthVal"></span>

Answer 2

根据您的html和响应结构，我建议您遍历响应，对于那些有消息的人，仅将代码用作数组元素索引。像这样：

const respMock = [{
  code: 0,
  message: "Please fill valid date of birth."
}, {
  code: 1,
  message: ""
}];

const inputs = $('.date_of_birth');

respMock.forEach(function(resp) {
  if (resp.message) {
    let errorSpan = $(inputs[resp.code]).next();
    errorSpan.text(resp.message);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="date_of_birth" name="date[]" type="text" value="" />
<span class="stepbirthVal"></span>
<input class="date_of_birth" name="date[]" type="text" value="" />
<span class="stepbirthVal"></span>

根据来自后端的响应显示错误消息

2 个答案: