jQuery 发送并显示每行 textarea 的 ajax 结果答案

【问题标题】：jQuery send and display ajax result per line of textareajQuery 发送并显示每行 textarea 的 ajax 结果
【发布时间】：2014-11-29 20:55:54
【问题描述】：

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

我想这样做。单击按钮后向服务器发送 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

});

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

非常感谢！

【问题讨论】：

尝试使用嵌套的 ajax 调用，这将很有帮助：- link。您同时调用 3 个 ajax 调用，您必须等待一个 ajax 成功，然后再调用另一个 ajax 调用。
感谢您的回复。如果关键字的数量是动态的，那么我们如何在没有硬编码功能的情况下执行每个关键字的功能。再次感谢！

标签： javascript php jquery ajax

【解决方案1】：

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

将所有关键字存储在数组中，假设keyword_list并存储var key_length = keyword_list.length
然后使用迭代函数调用列表：-

function nestedAjaxCalls(array1 , length1){ //terminating codition if (length1 == 0){ return;} else{ $.ajax({ .... data:{action: "get_rank",keywords: keywordLines[array1.length - length1]}, success:function(response){ ... nestedAjaxCalls(array1,length1 -1); } }); } }
当事件触发时调用这个函数nestedAjaxCalls(keyword_list, key_length)

【讨论】：

非常感谢！你节省了我的时间。它工作得很好。它总是多发送 1 个请求。这是空数组关键字值的 bcz。我已经通过 if( typeof (array1[array1.length - length1]) !== 'undefined' ) { } 检查了它，然后工作正常。再次感谢你的好答案。接受答案并投票！
欢迎您，帮助别人总是感觉很棒。 Stackoverflow 社区在我的项目中帮助了我很多，我只是回报。