javascript - 验证 AJAX 帖子上的表单

Question

我正在做一种计算器，客户端需要输入数据才能执行计算。

我正在验证来自客户端的信息，但我也想从服务器端进行验证。 This是我正在遵循的示例，但我不知道如何使其与我的问题兼容。

@RestController
@RequestMapping(value = "/api")
public class CalculationController {

    ...

    @RequestMapping(value = "calculate", method = RequestMethod.POST)
    public double[] calculate(@ModelAttribute("calcForm") @Validated CalculationForm form,
                                  BindingResult result,
                                  final RedirectAttributes redirectAttributes) {
        double[] ans = new double[4];

        // Calculate and fill ans

        return ans;
    }

我的 AJAX 帖子:

function calculate() {
    if ($('#zone').val() === '' || $('#roofArea').val() === '' || $('#roofType').val() === '') {
        alert("Missing data");
    } else {
        var dataIn = $("#myForm").serialize();
        $.ajax({
            type: "POST",
            url: "api/calculate",
            data: dataIn,
            dataType: "json",
            success: function (data) {
                         // Update labels in page
                     },
                     error: function (e) {
                         alert("Error: " + e);
                     },
                     done: function (msg) {
                         alert("Done: " + msg);
                     },
                     async: false
             });
             return false;
        };

和我的 validator :

@Component
public class BasicValidator implements Validator {
    private Pattern pattern;
    private Matcher matcher;
    private static final String AREA_PATTERN = "^\\d+(\\.\\d{1,2})?$";

    @Override
    public boolean supports(Class<?> clazz) {
        return CalculationForm.class.equals(clazz);
    }

    @Override
    public void validate(Object target, Errors errors) {

        CalculationForm form = (CalculationForm) target;

        ValidationUtils.rejectIfEmptyOrWhitespace(errors, "zone", "You must select a city or area of the map.");
        ValidationUtils.rejectIfEmptyOrWhitespace(errors, "roofArea", "You must enter the roof area.");

        pattern = Pattern.compile(AREA_PATTERN);
        matcher = pattern.matcher(String.valueOf(form.getRoofArea()));
        if (!matcher.matches()) 
            errors.rejectValue("roofArea", "You must enter a valid number.");

    }
}

我使用 AJAX，因为我需要在表单完成时仅更新某些特定标签的值，因此我无法重新加载页面。

问题是，如果一切正确，/api/calculate 返回一个 double 组，我用它来填充页面。但如果发生错误(未填写必填字段)，我需要您告诉我错误发生的位置，以便显示相应的消息。

Answer 1

您需要使用以下域对象来发送响应:

public class JsonResponse {
        private String status = null;
        private Object result = null;
        public String getStatus() {
                return status;
        }
        public void setStatus(String status) {
                this.status = status;
        }
        public Object getResult() {
                return result;
        }
        public void setResult(Object result) {
                this.result = result;
        }

}

它包含两个属性，“status”和“result”。 “status”字段是字符串类型，将包含“FAIL”或“SUCCESS”。 “结果”将包含要发送回浏览器的其他数据。

现在更改 Controller 方法以在成功和失败情况下返回 JsonResponse。

@RequestMapping(value = "calculate", method = RequestMethod.POST)
    public JsonResponse calculate(@ModelAttribute("calcForm") @Validated CalculationForm form,
                                  BindingResult result,
                                  final RedirectAttributes redirectAttributes) {

        JsonResponse res = new JsonResponse();

            if(!result.hasErrors()) {
                    double[] ans = new double[4];
                    -----------------------------
                    -----------------------------
                    res.setResult(ans);
                    res.setStatus("SUCCESS");
                    res.setResult(userList);
            } else {
                    res.setStatus("FAIL");
                    res.setResult(result.getAllErrors());
            }

            return res;
    }

现在在你的 ajax success 函数中检查验证。

success: function (data) {
    if(data.status == "SUCCESS") {
        // Update labels in page
    } else {
        errorInfo = "";
        for(i =0 ; i < data.result.length ; i++) {
            errorInfo += "<br>" + (i + 1) +". " + data.result[i].code;
        }
        //add a div with id error to show errors.
        $('#error').html("Please correct following errors: " + errorInfo);
    }
},