如何通过ajax从以下数组中发送每个元素?

时间:2018-04-02 15:32:47

标签: javascript jquery ajax asynchronous

通过ajax从以下数组发送每个元素。注意:每个请求必须 一旦前一个完成,就可以制作。 ['This','is','a','fake,'array']

我对这个问题感到有点困惑,因为我认为Ajax是异步的,这意味着脚本不停地向服务器发送请求而不等待回复。

2 个答案:

答案 0 :(得分:1)

***被downvoted所以澄清一些事情:它在问题陈述中明确指出必须同步进行REQUEST。我确实知道有更好的方法可以通过def / promises异步执行此操作,因此订单仍然是结果,但不是请求。

Ajax有一个async参数,你可以将其设置为false,这将阻塞直到调用完成。

每份文件:

async(默认值:true) 类型:布尔值 默认情况下,所有请求都是异步发送的(默认设置为true)。如果需要同步请求,请将此选项设置为false。跨域请求和dataType:" jsonp"请求不支持同步操作。请注意,同步请求可能会暂时锁定浏览器,并在请求处于活动状态时禁用任何操作。从jQuery 1.8开始,不推荐使用async:false和jqXHR($ .Deferred);您必须使用success / error / complete回调选项而不是jqXHR对象的相应方法,例如jqXHR.done()。

http://api.jquery.com/jquery.ajax/

示例:

$.each(["This", "is", "a", "fake", "array"], function( index, value ) {
 $.ajax({
  type: 'POST',
  dataType: 'json',
  url: '/echo/json/',
  data : { json: JSON.stringify( value ) },
  async: false,
  success: function(data) { alert(data);}  
 }); 
});

工作小提琴示例:https://jsfiddle.net/zm9bb4xk/

答案 1 :(得分:1)

我在谈论 JQuery Ajax

因此,首先,基于文档,Ajax有许多在特定时间运行的事件,例如:

beforeSend(本地事件)

  

此事件在Ajax请求启动之前触发,   允许您修改XMLHttpRequest对象(另外设置   标题,如果需要的话。)

错误(本地事件)

  

只有在请求发生错误时才会调用此事件(您   永远不会同时出现错误和成功回调请求。)

完成(本地活动)

  

无论请求是否成功,都会调用此事件,或者   不。即使是同步,您也将始终收到完整的回调   请求。

成功(本地活动)

  

仅在请求成功时才会调用此事件(无错误   从服务器,没有数据错误。)

More in documentation.

其次,按照您的示例(您必须使用自己的数据完成此操作,并且此代码未经过测试,可能会出现一些小的sintax错误),近似值为:

//  Variables
var myArray = ["This", "is", "a", "fake", "array"];
var globalIndex = 0;


//  Function for Ajax Calls
function myFunction(){
    $.ajax({
        url: 'myURL',                       //  Your own controller/url

        type: "GET",                        //  Or POST

        dataType: "json",                   //  Or other datatype

        data: {
            arrayContent: myArray[globalIndex]  //  arrayContent = your controller param name   
        },      

        /**
         * A function to be called if the request succeeds.
         */
        success: function(data) {       

            alert('Load was performed. Look at the console (F12 or Ctrl+Shift+I, Console tab) for more information! '); 
            alert(data);                //  Do what you want with your data, this is an example 

            globalIndex = globalIndex +1;           
            //  Recursive/next call if current call is finished OK and there are elements
            if(globalIndex < myArray.length){
                myFunction();
            }
        },

        /**
         * A function to be called if the request fails. 
         */
        error: function(jqXHR, textStatus, errorThrown) {

            alert('An error occurred... Look at the console (F12 or Ctrl+Shift+I, Console tab) for more information!');

            alert('<p>status code: '+jqXHR.status+'</p><p>errorThrown: ' + errorThrown + '</p><p>jqXHR.responseText:</p><div>'+jqXHR.responseText + '</div>');
            console.log('jqXHR:');
            console.log(jqXHR);
            console.log('textStatus:');
            console.log(textStatus);
            console.log('errorThrown:');
            console.log(errorThrown);

            //  We don't do a recursive/next call because current call has failed
        },
    });
}

//  First call to myFunction

myFunction();