Question

我已经尝试了一天知道如何解决这个问题，我真的试着搜索一个答案，但我想我无法理解或者我不理解。

以下是我的问题的步骤：

1.-我会做一个for，所以我必须使用ajax逐个处理每个记录（我看到使用async：false会让我一个接一个地处理而不是所有记录同时处理，我的意思是就像一个fifo，我是对的吗？因为我需要这个，因为我使用httpsession需要逐个更改一些变量，这就是为什么我试图逐个处理每个记录，尽管我的例子我没有表明这一点）

2.-如果我的验证是1，我将调用下一个ajax但是如果它是2号我必须要求用户放置somethig然后继续使用另一个ajax然后这个ajax会将另一个ajax称为数字1（这是我的问题之一，因为当我显示模态时，模态显示但它继续循环，所以我需要停止我的ajax，直到用户放东西，当他点击＆＃34;保存更改＆＃34;它必须继续循环，虽然我说这没有发生（我试图使用一段时间（真）但我没有机会我的浏览器停止脚本），我的程序显示模态并继续循环无论如何什么）

3.-如果用户看到模态并单击关闭，那么我不会继续使用我的ajax，但我将继续我的循环或我的for，因为我需要处理所有事情。

这是模态的一个例子：

现在，正如你所看到的，是的，我的模态出现了，但我的循环无论如何都继续:(

所以我说我需要这个：

1.-我为了处理我所有的东西而做了一个for，但是根据答案有时我必须显示模态，所以当用户点击savechanges时它将调用另一个ajax然后另一个ajax并继续循环，但如果用户点击关闭井我必须停止下一个ajax呼叫并继续我的for在下一个位置并再次执行它再次直到我停止。

2. - 换句话说，如果我的结果是ajax数字2中的1，我必须调用我的ajax数字1,2,4但是如果我在ajax数字2中的结果是== 2那么我必须显示模态和停止for因为它继续循环，并且根据answe是否保存更改然后我必须调用ajax3并且这将调用ajax4但是如果它关闭然后我必须继续在下一个循环中，并且再次，这可能发生取决于答案。

以下是我的示例代码：

JSP：

<!DOCTYPE html>
<html>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<script>
$(document).ready(function(){

  var positionNumber = 1;
  $(".clickme").click(function(){
    for(var i=0; i < 10; i++){
        ajaxOne();
    }

    $("body").on('click', '.btn-default', function(e) {
      console.log('ok we finish no more calls to servlets');
      $('#myModal').modal('hide')   ;
      console.log('BUT LETS CONTINUE WITH THE FOR.... WE HAVE TO CHECK ALL THE ITEMS')
    });

    $("body").on('click', '.btn-primary', function(e) {
      console.log('ok lets call now ajax three');
      ajaxThree();
    });
  });



  function ajaxOne(){
    $.ajax({
      type: "POST",
      url: "/Test/one",
      //contentType : "text/xml",
      async :false ,
      beforeSend: function () {
        console.log('CALLING POSITION: '+positionNumber);
        console.log('Call Servlet one')
      },
      success: function(data,status,xhr){
        console.log(data)
      },
      error: function(xhr, status, error){
        alert("Error!" + xhr.status);
      },
      complete: function(){
        positionNumber++;
        console.log('finish Call Servlet one')
        ajaxTwo();
      }
     });
  }


  function ajaxTwo(){
    var text;
    $.ajax({
      type: "POST",
      url: "/Test/two",
      //contentType : "text/xml",
      async :false ,
      beforeSend: function () {
        console.log('Call Servlet two')
      },
      success: function(data,status,xhr){
      console.log(data);
      text = data;
      },
      error: function(xhr, status, error){
        alert("Error!" + xhr.status);
      },
      complete: function(){
        console.log('finish Call Servlet two')
        if(parseInt(text)==2){
          $('#myModal').modal('show')   ; // I have to show the modal, and stop all processing,
                                          // if he select save changes I will call ajax 3 and then four, if he select cancel then
                                          // I have to continue with my loop again...
                                          // Here I need a little help :'( thank you so much
        }else{
          ajaxFour();
        }
      }
    });
  }

  function ajaxThree(){
    $.ajax({
      type: "POST",
      url: "/Test/three",
      //contentType : "text/xml",
      async :false ,
      beforeSend: function () {
        console.log('Call Servlet three')
      },
      success: function(data,status,xhr){
        console.log(data);
      },
      error: function(xhr, status, error){
        alert("Error!" + xhr.status);
      },
      complete: function(){
        console.log('finish Call Servlet three')
        ajaxFour();
      }
    });
  }

  function ajaxFour(){
    $.ajax({
      type: "POST",
      url: "/Test/four",
      //contentType : "text/xml",
      async :false ,
        beforeSend: function () {
        console.log('Call Servlet four')
      },
      success: function(data,status,xhr){
        console.log(data);
      },
      error: function(xhr, status, error){
        alert("Error!" + xhr.status);
      },
      complete: function(){
        console.log('finish Call Servlet four')
      }
    });
  }
});
</script>
</head>
<body>


<div class="clickme">click me </div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" >Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

</body>
</html>

Servlet one

package com.dot.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ServeletOne
 */
@WebServlet(name = "one", urlPatterns = { "/one" })
public class ServeletOne extends HttpServlet {
  private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public ServeletOne() {
        super();
        // TODO Auto-generated constructor stub
    }

  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    response.getWriter().append("Served at: ").append(request.getContextPath());
  }

  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    System.out.println("Yep i did a post");
    response.setContentType("text/html");
    PrintWriter out = response.getWriter();
     out.println("one");
  }

}

Servlet二

package com.dot.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ServeletOne
 */
@WebServlet(name = "two", urlPatterns = { "/two" })
public class ServeletOne2 extends HttpServlet {
  private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public ServeletOne2() {
        super();
        // TODO Auto-generated constructor stub
    }

  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    response.getWriter().append("Served at: ").append(request.getContextPath());
  }

  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    System.out.println("Yep i did a post");
    response.setContentType("text/html");
    PrintWriter out = response.getWriter();
    int tmp = (int) ( Math.random() * 2 + 1);
    System.out.println(tmp);
     out.println(tmp);
  }

}

Servlet三

package com.dot.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ServeletOne
 */
@WebServlet(name = "three", urlPatterns = { "/three" })
public class ServeletOne3 extends HttpServlet {
  private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public ServeletOne3() {
        super();
        // TODO Auto-generated constructor stub
    }

  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    response.getWriter().append("Served at: ").append(request.getContextPath());
  }

  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    System.out.println("Yep i did a post");
    response.setContentType("text/html");
    PrintWriter out = response.getWriter();
     out.println("three");
  }

}

servlet四

package com.dot.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ServeletOne
 */
@WebServlet(name = "four", urlPatterns = { "/four" })
public class ServeletOne4 extends HttpServlet {
  private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public ServeletOne4() {
        super();
        // TODO Auto-generated constructor stub
    }

  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    response.getWriter().append("Served at: ").append(request.getContextPath());
  }

  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    System.out.println("Yep i did a post");
    response.setContentType("text/html");
    PrintWriter out = response.getWriter();
     out.println("four");
  }

}

Answer 1

为了解决我的错误，我使用了一些标志

var positionNumber = 0;
    var flagPressedButton = false;

在我用我用其他方式

for(i; i < 10;){

            ajaxOne();
                 i++;
                 if(continuar == false) break;

当我的模态出现时，如果一切正常，我再次模拟一次点击

$（ “clickme”。）点击（）;

这是我所有的js代码

<script>
$(document).ready(function(){
    var continuar = true;
    var positionNumber = 0;
    var flagPressedButton = false;
    var i=0;
    $(".clickme").click(function(event){

        for(i; i < 10;){

            ajaxOne();
                 i++;
                 if(continuar == false) break;

        }


      $("body").on('click', '.btn-default', function(e) {
          console.log('ok we finish no more calls to servlets');
          $('#myModal').modal('hide')   ;
          console.log('BUT LETS CONTINUE WITH THE FOR.... WE HAVE TO CHECK ALL THE ITEMS')
        $(".clickme").click();
      });

      $("body").on('click', '.btn-primary', function(e) {
          console.log('ok lets call now ajax three');
          ajaxThree();
        $(".clickme").click();
      });

    });



function ajaxOne(){
    $.ajax({
           type: "POST",
             url: "/Test/one",
           //contentType : "text/xml",

           async :false ,
           beforeSend: function () {
               continuar =true;
                 positionNumber++;
               console.log('CALLING POSITION: '+positionNumber);
             console.log('Call Servlet one')
                },
             success: function(data,status,xhr){
                console.log('complete: ', JSON.parse(data));
                var statusCode = JSON.parse(data).responseCode;
                console.log('satusCode: ', statusCode);
                if (statusCode) {
                    ajaxTwo(statusCode);
                }
                                      },
                error: function(xhr, status, error){
                  alert("Error!" + xhr.status);
                         }

           });

}


    function ajaxTwo(){
        var text;
        $.ajax({
               type: "POST",
                 url: "/Test/two",
               //contentType : "text/xml",
               async :false ,
               beforeSend: function () {
                 console.log('Call Servlet two')
                    },
                 success: function(data,status,xhr){
                    console.log(data);
                    text = data;

                                          },
                    error: function(xhr, status, error){
                      alert("Error!" + xhr.status);
                             },
                         complete: function(){
                             console.log('finish Call Servlet two')

                            if(parseInt(text)==2){
                                console.error('LLAMARE A LA MODAL');
                                   $('#myModal').modal('show')   ;
                                   continuar = false;
                            }else{
                                ajaxFour();
                            }
                            }

               });

    }

    function ajaxThree(){
        $.ajax({
               type: "POST",
                 url: "/Test/three",
               //contentType : "text/xml",
               async :false ,
               beforeSend: function () {
                 console.log('Call Servlet three')
                    },
                 success: function(data,status,xhr){
                    console.log(data);

                                          },
                    error: function(xhr, status, error){
                      alert("Error!" + xhr.status);
                             },
                         complete: function(){
                             console.log('finish Call Servlet three')
                                                            console.error('CERRARE A LA MODALA Y CONTINUARE');
                             $('#myModal').modal('hide')   ;
                             ajaxFour();
                             continuar = true;
                            }

               });

    }

    function ajaxFour(){
        $.ajax({
               type: "POST",
                 url: "/Test/four",
               //contentType : "text/xml",
               async :false ,
               beforeSend: function () {
                 console.log('Call Servlet four')
                    },
                 success: function(data,status,xhr){
                    console.log(data);

                                          },
                    error: function(xhr, status, error){
                      alert("Error!" + xhr.status);
                             },
                         complete: function(){
                             console.log('finish Call Servlet four')
                            }

               });

    }
});
</script>

正如我所说，我需要展示一个模态，然后继续，好吧我以这种方式解决它现在它对我来说工作正常=）并且不要忘记使用async：false，以便通过请愿提出请愿

ajax，如果是，则显示模态然后继续使用另一个ajax，如果不继续循环

1 个答案: