检查HTML表单的响应数

Question

所以我需要验证该课程是否有标题，并且检查了3个SLO。我有一个Java代码段，可以确保我的分数不超过3，但是如何确定我的分数不超过3，并且课程说明中包含信息。

here is my code: 
var limit = 3;
$('input.single-checkbox').on('change', function(evt) {
   if($(this).siblings(':checked').length >= limit) {
       this.checked = false;
   }
});


function submitUser(className, slo){
$(function() {
    $.ajax({
        cache:false,
        type: 'POST',
        url: '/echo/json/',
        data: {
            json:'{"Course":className,"SLO":slo}'
        },
        success: function(data) {
            $('#ajax-json').html(data.Course);
            $('#ajax-html').html(data.SLO);
        },
        error:function(error){
            alert('there was an error');  
        },
        dataType: 'json'
    });


    });
}

而且我的HTML看起来像这样：

       <div class="pricing-levels-3">
       Course Title: <input class = "text" name = "course" id = "name" value = " "><br>
          <p><strong> Select 3 SLO Outcomes</strong></p>
          <input class="single-checkbox"type="checkbox" name="vehicle" value="SLO1">SLO1
          <input class="single-checkbox" type="checkbox" name="vehicle" value="SLO2">SLO2
          <input class="single-checkbox" type="checkbox" name="vehicle" value="SLO3">SLO3
          <input class="single-checkbox" type="checkbox" name="vehicle" value="SLO4">SLO4
          <input class="single-checkbox" type="checkbox" name="vehicle" value="SLO5">SLO5
          <input class="single-checkbox" type="checkbox" name="vehicle" value="SLO5">SLO6<br><br>
          Upload Artifacts:<br>
          Artifact 1: <input type = "file" name ="ArtifactOne"><br>
          Artifact 2: <input type = "file" name ="ArtifactTwo"><br>
          Artifact 3: <input type = 'file' name ="ArtifactThree"> <br>
          <br>
           <button id="btn" onclick="submitUser(document.getElementById('name').value, document.getElementByName('vehicle').value)">Create Class</button>
          </div></form>

  <div id="ajax-json"></div>
 <div id="ajax-html"></div>

每当我提交时，都会出现以下错误：

{"error":"key missing: title"}

有关如何使其正常工作的任何建议？不需要花哨，我本质上只需要一个“是，您拥有一切”或“不，您不拥有一切”

这是我的JSFiddle页面：http://jsfiddle.net/u2fk3hx0/3/#&togetherjs=FHtk9HdM5v

Answer 1

基于错误消息，当您提出请求时，它可能来自服务器。在此功能中：

function submitUser(className, slo){
  $(function() {
    $.ajax({
      cache:false,
      type: 'POST',
      url: '/echo/json/',
      data: {
        json:'{"Course":className,"SLO":slo}'
      },
      success: function(data) {
        $('#ajax-json').html(data.Course);
        $('#ajax-html').html(data.SLO);
      },
      error:function(error){
        alert('there was an error');  
      },
      dataType: 'json'
    });
  });
}

...注意，您要传递的data将包含此文字字符串值：

{"Course":className,"SLO":slo}

...这不是您想要的。相反，您想传递包含传递给函数的参数的JSON。您尚未发布此/echo/json服务器端代码的实现，因此很难确定如何解决此问题，但是我最大的猜测是您希望将data属性设置为传递给$.ajax这个：

$.ajax({
  // ...
  data: {
    json: {
      Course: className,
      SLO: slo
    }
  },
  // ...
});

这里的区别在于，您传递的是使用实际参数的对象，而不是带有参数names的字符串。 jQuery应该为您将data对象转换为JSON字符串。