javascript - jQuery 发送并显示每行文本区域的 ajax 结果

Question

我有带有文本区域的表单。在文本区域中，用户可以每行输入关键字。

我想做这样的事情。单击按钮后，将 ajax 请求发送到服务器并获取第一个关键字的结果。然后显示/附加它。完成后，发送第二个关键字的第二个 ajax 请求。每个关键字都是这样。

我想这样做是因为每个关键字的服务器响应有点慢。如果一次显示所有关键字输出，则需要太多时间才能看到结果。所以在上面的方法中我认为用户不需要等待看到所有结果。用户可以看到一一关键字输出。

我的代码是这样的，我在 WordPress 插件中使用它。获取结果为 json。

jQuery(document).ready(function () {

 jQuery('#get_seo_rank').click(function() {  

    var keywordLines = jQuery('#keywords').val().split(/\n/); 
    var current = 0;
    var total = keywordLines.length;


    for (var i=0; i < total; i++) {
            jQuery.ajax({
              type : "post",
              dataType : "json",
              url : process.php,
              data : {
                        action: "get_rank", 
                        keywords: keywordLines[i]
                    },

                  beforeSend:function(){

                  },
                  success:function(response){

                        if(response.type == "success") {
                           jQuery("#resultWrap").append(response.result);
                        }
                        else if(response.type == "error") {
                           jQuery("#resultWrap").html(response.result);

                        } else {
                             jQuery("#resultWrap").html(response.result);
                        }

                  },
                  error:function(response){

                  }


           }); 

    }  // end loop


}); // end click event

});

如果有人可以对此提供帮助，我将不胜感激。

非常感谢!

Answer 1

为动态关键字创建嵌套的ajax调用函数:-

1. 将所有关键字存储在数组中，假设keyword_list并存储var key_length = keywords_list.length

2. 然后使用迭代函数调用列表:-

   函数nestedAjaxCalls(array1, length1){
//终止条件
if (length1 == 0){ 返回;}
别的{
$.ajax({
....
数据:{操作:“get_rank”，关键字:keywordLines[array1.length - length1]}，
成功:函数(响应){
...
嵌套AjaxCalls(array1,length1 -1);
}
});
}
}

3. 当事件触发时调用此函数nestedAjaxCalls(keyword_list, key_length)