如何解析JQUERY 通过AJAX请求来的HTML数据

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何解析JQUERY 通过AJAX请求来的HTML数据相关的知识,希望对你有一定的参考价值。

参考技术A javascript代码:

$.ajax(
url:'/htmltest',
type:'get',
dataType:'xml',
timeout:1000,
error:function()
alert("request error!");
,
success:function(da
ta)
alert(da
ta);
$(da
ta).find("div").each(function()
var text = $(this).text();
alert(text);
);

);
Java代码:

protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException

httpServletResponse.setContentType("text/xml;charset=utf-8");
httpServletResponse.setHeader("Cache-Control","no-cache");
PrintWriter out = httpServletResponse.getWriter();
out.println("<div>");
out.println("<p>test dom tree</p>");
out.println("</div>");
out.flush();
out.close();
本回答被提问者和网友采纳

带有ajax请求的jQuery .each循环

【中文标题】带有ajax请求的jQuery .each循环【英文标题】:jQuery .each loop with ajax request 【发布时间】:2020-06-05 14:03:59 【问题描述】:

我是新来的。

$.each(a, function (i, obj) 
    $('#labelid').html("inserting this data: "+obj.somedata);
    // some other code

    $.ajax(
        // ajax request with insert
    );
);

我有一个 each 循环,其中有一个 ajax 请求,它只插入一些数据,以及一些其他代码,主要用于更改一种“状态”标签(“插入这个:(一些数据)”)。

我的问题是当循环执行时,除了 ajax 请求之外,其中的代码一直迭代到最后,在我的标签中显示类似“插入这个:(最后一个元素行)”,而 ajax 请求仍在运行在后台。

我想实现这样的目标: 1. 标签显示“插入第一组数据” 2. ajax 请求插入第一组数据 3. 标签显示“插入第二组数据” 4.ajax请求插入第二组数据

这可能吗?我不想使用 async: false。

谢谢

【问题讨论】:

那么,你的意思是要延迟循环执行,直到循环内的ajax函数完成? @palaѕн 是的,我愿意 对于 ajax 选项添加 async: false, jQuery AJAX函数的异步设置默认值为true 为什么不想使用 async:false? 【参考方案1】:

将您的 ajax 请求包装在一个 Promise 中并使用 await 调用该 Promise,因此代码的执行等待该 Promise 返回 ajax 请求的响应,您可以将标签设置为所需的格式。

const response = await new Promise((accept, reject) => $.ajax(
  url: url,
  type: "POST",
  success: data => accept(data),
  error: (request, status, error) => reject( request, status, error )
));

【讨论】:

【参考方案2】:

这里是 jQuery Ajax 上的一个小承诺包装器。我认为它适用于$.each

const _ajaxAsync = url => new Promise((accept, reject) => $.ajax(
    url: url,
    type: "POST",
    success: data => accept(data),
    error: (request, status, error) => reject( request, status, error )
));

$.each(a, async function (i, obj) 
    $('#labelid').html("inserting this data: " + obj.somedata);
    // some other code

    let res = await _ajaxAsync('https://example.com').catch(e => console.log(e));
    console.log(res);
);
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】:

【参考方案3】:

在这种情况下,for 循环将不起作用,因为请求是异步的。您有 2 个选项。

    如果要使用 for 循环,请在 $.ajax 中将 async 设置为 false 采用递归方法,即仅在响应时发送下一个请求 的请求到达。这可以通过创建递归函数来完成。

【讨论】:

【参考方案4】:

因为,Ajax 请求异步,所以你的循环不会等待它的响应并立即移动到下一个。要将 Ajax 作为 Synchronous 执行,您需要添加以下选项。

$.ajax(
    async: false,
    // your other options
)

【讨论】:

我已经尝试过了,页面只是冻结并插入数据库中的所有内容,完成后它只显示最后插入数据

以上是关于如何解析JQUERY 通过AJAX请求来的HTML数据的主要内容,如果未能解决你的问题,请参考以下文章

带有ajax请求的jQuery .each循环

用JQuery Ajax 与一般处理程序 请求数据无刷新,以及如何调试错误

jquery如何返回json数据?

带有json响应的jQuery ajax请求,如何?

Django 怎样传数据给HTML页面的ajax

如何在 jquery 中创建关联数组并通过 ajax 发送以使用 php 解析?