个人中心
gpt4 book ai didi

javascript - 如何使用 jquery 将 ajax 数据加载到 div 中？

转载 作者：行者123 更新时间：2023-11-30 12:37:20 25 4
gpt4 key购买 nike

我想做的是加载一个外部 html 页面，然后在单击按钮时在 div 中显示内容。

我收到显示 test.html 内容的警告消息，但是当我尝试在 div 中显示它时，没有任何反应。

内容只是一个div标签。我不想只加载出现在警告消息中的文本本身。

在 html 文件中，我知道我真的不需要为如此简单的事情使用 ajax，但是如果我能让它工作，它将帮助我解决 future 的问题。

      $.ajax({
      type: "GET",
      url: "test.html",
      dataType: "text",
      success : function(data) {
                    step1j = data;
            alert(step1j); // WORKS
            return step1j;
                }
    });


$("#step1").click(function() {
    $("#texter").html(step1j);
});

最佳答案

默认情况下，Ajax 调用是异步的，因此您所拥有的将无法工作。我建议使用 jQuery 的 .load()它为您处理整个加载到 div 的过程(jQuery 引用信息 here )。

$("#step1").click(function() {
    $("#texter").load("test.html");
});

要使其正常工作，必须满足以下条件:

  1. #step1在您运行此初始代码时必须已经存在(例如，必须已经加载 DOM 才能安装 .click() 处理程序。例如，您不能从 <head> 标记中的代码安装点击处理程序，因为页面 DOM尚未加载。
  2. #texter必须在点击时存在。请确保那里没有拼写错误。
  3. 您正在加载的 URL 必须与您运行 javascript 的网页具有相同的来源(例如相同的域)。这是因为浏览器的“同源”安全限制。

阅读this answer如果您想详细了解为什么不能像您尝试的那样从异步 Ajax 调用返回数据。异步调用在某个不确定的时间后完成，因此使用它们的结果的唯一可靠位置是在完成回调中或在您从完成回调中调用的函数中。在这种情况下，.load()是一个更高级别的 jQuery 功能，使这更容易。

关于javascript - 如何使用 jquery 将 ajax 数据加载到 div 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25676851/

25 4 0
文章推荐： c# - 基于计数的 orderby 相关性的 LINQ 关键字搜索 (LINQ to SQL)
文章推荐： c# - RichTextBox 替换 Winforms .NET2.0+
文章推荐： c# - c# 中更简单的大加法器？
文章推荐： c# - 如何绘制选定的文本
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com