Question

我正在使用spring mvc servlet项目。我有一个表格，其中有2个下拉列表

假设a）月：b）年：

和一个“提交”按钮。

现在，当用户在下拉菜单中选择值并单击提交时：控件转到控制器GenerateForm 的onSubmit函数。这里我做了一个数据库查询，并假设查询给了我一个值，我存储在变量x中。现在

if (x>0){
    give a confirmation popup in UI ASKING user ->
    Do you want to continue ?
    if( userClicks Yes){
    delete database value
    continue with normal flow ;
    }else{
        return null ;
    }
}
else{
    continue with normal flow ;
    save into database
}

请帮助我我应该如何创建此确认弹出窗口？此时控件位于Controller中。请参阅下面的代码框架。

Code Skeleton：

模特课程：

public class Report {
    private String month;
    private String year;
    //getter setter here
}

控制器类：

public class GenerateForm extends BaseFormController {

    // declaration of other class objects here

    public void afterPropertiesSet() {
        // assert calls here 
        super.afterPropertiesSet();
    }

    protected Object formBackingObject(HttpServletRequest request) throws Exception {

        Report rp = (Report)createCommand();
        return rp;
    }

    protected ModelAndView onSubmit(HttpServletRequest request, HttpServletResponse response, Object command,   BindException errors)
                throws Exception { 
        Report rp = (Report) command;

        x = Call_to_Manager_Class(rp); // Manager class in turn call DAO class

        if (x>0){
            give a confirmation popup in UI ASKING user ->
            Do you want to continue ?
            if( userClicks Yes){
                continue with normal flow ;
                return new ModelAndView(getSuccessView());
            }else{
                return null ; // stay on same page
            }
        }
        else{
            continue with normal flow ;
            return new ModelAndView(getSuccessView());
        }   

    }

    protected void initBinder(HttpServletRequest request,
            ServletRequestDataBinder binder) throws Exception {

        // binding done here
    }

    protected Map referenceData(HttpServletRequest request, Object command,
            Errors errors) throws Exception {
        //code related to reference data here   
        return data;
    }

}

.xml文件

<bean id="generatForm" class="com.web.controller.GenerateForm">
    <property name="commandName" value="generate" />
    <property name="commandClass" value="com.domain.Report" />
    formview,success view and cancel view defined here similarly
</bean>

正确定义了所有bean。控件将转到onSubmit函数。现在帮助我如何在UI中生成确认弹出窗口，要求用户按“是”或“否”并相应地处理。

编辑：我按照建议做了以下更改但是表单也随着Ajax请求一起提交，尽管我正确地获得了ajax响应以及确认popUp。如何防止表单被提交，我希望它只在用户在确认弹出窗口中按确定时才提交。

$(document).ready(function() {
$('#myForm').submit(function (ev) {
        console.log(1);
        var year = $('#year').val();
        var month = $('#month').val();
        console.log(year);
        console.log(month);
        $.ajax({
            type: "GET",
            url: 'ActionServlet',
            data: "year=" + year + "&month=" + month,
            success: function (data) {
              console.log(data);
              $('#ajaxDiv').text(data);
              var result= parseInt(data, 10);
              if (result > 0) {
                    if(!confirm("you sure about that?")){
                        ev.preventDefault(); 
                    }
              }
            },error : function(e) {
                alert('Error: ' + e); 
            }
        });  
});
});

编辑2 即使我在开始时编写e.preventDefault（），AJAX调用仍将是异步的，当ajax响应到达时，此函数流将结束。我试过这样做。

$(document).ready(function() {
    $('#myForm').submit(function (ev) {
            ev.preventDefault();
            console.log(1);
            var year = $('#year').val();
            var month = $('#month').val();
            console.log(year);
            console.log(month);
            $.ajax({
                type: "GET",
                url: 'ActionServlet',
                data: "year=" + year + "&month=" + month,
                success: function (data) {
                  console.log(data);
                  $('#ajaxDiv').text(data);
                  var result= parseInt(data, 10);
                  if (result > 0) {
                        if(confirm("you sure about that?")){
                            //$('form').unbind('submit').submit();
                            $('#myForm').submit();
                            //$(this).unbind('submit').submit();
                            //$('#submit').click();
                            //$(this).trigger(submit); 
                            //$(this).submit();
                        }
                  }
                },error : function(e) {
                    alert('Error: ' + e); 
                }
            }); 
           console.log(2); 
    });
    });

但是一旦表单被ev.preventDefault（）阻止提交，我就无法在我的确认弹出窗口的基础上再次提交它。我尝试了很多方法。如果我删除了我的Ajax Call

 $(document).ready(function() {
        $('#myForm').submit(function (ev) {
                ev.preventDefault();
                console.log(1);
                var year = $('#year').val();
                var month = $('#month').val();
                console.log(year);
                console.log(month);
                $(this).submit();
                console.log(2); 
        });
        });

进入递归调用。我可以使用一些变量来停止递归但是如果我把它放在内部确认，它不再调用提交事件。

<div id="pageButtons">
    <button name="_submit" id="submit" > Generate</button>
</div>

这是我的提交按钮配置。请帮我修复最后一期。

编辑3 ：

我尝试了最后一个代码建议，它给了我这个控制台：

Uncaught TypeError: form.submit is not a function !!

然后，对于提交按钮，我删除了id =“submit”。在那之后当我重新运行我的代码时，一旦我点击提交按钮，我的表单就会被提交，这个jQuery事件也会被解雇。确认弹出来了，如果我选择确定，则再次提交表单。那么为什么表单会自动提交？用户在确认弹出窗口中单击确定？

Answer 1

您可以引入javascript来执行此操作。我将使用jQuery进行演示：

$("#your-form").submit(function(e) {
    if(!confirm("you sure about that?")){
         e.preventDefault();
    }
});

单击提交按钮时将弹出一个弹出对话框。如果用户不想提交，这将阻止表单提交给控制器。

根据OP的评论更新：

$(document).ready(function() {
$('#myForm').submit(function (ev) {
    ev.preventDefault(); // prevent default action witch is form-submit
    var form = this; // avoid using jQuery's selection. 
    console.log(1);
    var year = $('#year').val();
    var month = $('#month').val();
    console.log(year);
    console.log(month);
    $.ajax({
        type: "GET",
        url: 'ActionServlet',
        data: "year=" + year + "&month=" + month,
        success: function (data) {
          console.log(data);
          $('#ajaxDiv').text(data);
          var result= parseInt(data, 10);
          if (result > 0) {
                if(confirm("you sure about that?")){ //if yes is clicked (negation is removed) 
                    form.submit(); // this won't trigger the jQuery's submission, so it will not cause infinite loop.
                }
          }
        },error : function(e) {
            alert('Error: ' + e); 
        }
    });  
});
});

在Spring MVC Servlet响应对象中确认PopUp（是或否）并处理是和否事件

1 个答案: