如何使用 ajax 和 jquery 更新特定的 div

Posted 2023-05-08

技术标签:

【中文标题】如何使用 ajax 和 jquery 更新特定的 div【英文标题】：How to update a specific div with ajax and jquery 【发布时间】：2012-04-24 08:50:00 【问题描述】：

我在现场工作，它有一个框架。想想gmail框架。就像 gmail 应用程序一样，我只希望在单击导航栏上的链接时更新内部 div。我已经得到它，所以 div 会发生变化，但它肯定不会给我我希望的结果。这是我所拥有的大致轮廓

<div id=container>
   <div id=page>
      ... some child divs in here
   </div></div>

因为容器有一个固定的滚动条，我不想改变它，我只想替换页面 div。这就是我设法在 jquery 方面提出的。我只是一个初学者，所以我真的不知道我在做什么，但我正在努力学习。

$(document).ready(function () 
    $.ajaxSetup (
        cache: false
    );
    var ajax_load = "<img src='bin/pics/loading.gif' alt='loading…' width='32px' height='32px' style='top: 250px; left: 250px;' />";
    var loadUrl = "bin/ajax/load.html";
    $("#mybuton").click(function()
        $("#page").load(loadUrl);
        location.hash = 'ajax';
    );
);

加载的 html 包含这个

<link rel="stylesheet" type="text/css" href="bin/main.css" />
<div id="page">
    <div id="child">
        <h1> sometitle </h1>
    </div>
</div>

有什么建议吗？

【问题讨论】：

你得到了什么结果？是否插入了 load.html 文件的内容？您是否希望该样式表在您的文档正文中执行任何操作？是的，我得到了一些东西，但是 css 不能正常工作，我不确定是否应该为插入的 html 创建新的 id。像“#pageajax”之类的。但是是的，我的主要问题是不知道如何设置我插入的内容或要替换的 div 以及不替换的 div。我非常了解这些东西的基本原理，但我不确定。（如果我理解正确的话）我个人会避免像这样动态加载样式表。我不确定所有浏览器都会遵守。将页面上所有可能的样式硬编码在一个或多个样式表中，然后通过切换 classNames 和/或 .style... / .css(...) 来重新设置样式更为传统。啊，好的，谢谢，我会试试看的。这更有意义。我真的不知道该怎么做。 【参考方案1】：

这里是 Jquery ajax 链接http://api.jquery.com/jQuery.ajax/

例如代码：

ajax_control = jQuery.ajax(
    url: "target.php",
    type: "POST",
    data: variable_name: variable_value
);
ajax_control.always(function()
    $('#content').html(ajax_control.responseText);
);

通过将调用分配给一个变量（上例中的“ajax_control”），您可以随时使用：

ajax_control.abort();

http://api.jquery.com/jQuery.post/ http://api.jquery.com/jQuery.get/

【讨论】：

【参考方案2】：

我不喜欢用链接来回答，也不喜欢用文字来回答，所以这里有一个例子，说明如何制作 div/table 或大多数 html 容器来更改其内容。

如果您将 MVC 与 Razor 一起使用，它看起来像这样

TestView.cshtml

@using (Ajax.BeginForm("Test",
                       "TestController", 
                       new AjaxOptions 
                           HttpMethod = "GET",
                           InsertionMode = InsertionMode.Replace,
                           UpdateTargetId = "searchResults" ))

    Search User by ID: <input type="text" name="id" />
    <input type="submit" value="Search" />


<table id="searchResults">
</table>

TestController.cs

public class TestController : Controller

    public PartialViewResult Test(int id)
    
        var model = myDbContext.Users.Single(q => q.UserID == id);

        return PartialView("_PartialViewTest", model);

_PartialViewTest.cshtml

@model IEnumerable<MyApp.Models.User>

<table id="searchResults">
    <tr>
        <th>Name</th>
        <th>Email</th>
    </tr>

    @foreach(var item in Model) 
        <tr>
            <td>@item.Name</td>
            <td>@item.Email</td>
        </tr>
    
</table>

...如果您想使用经典的 ASP.NET 来实现，应该是这样的：

TestPage.aspx

<body>
    <form id="form1" runat="server">
        <div>
            <button type="button" onclick='testCall()'>Test!</button>
            <hr />
            <div id="ajaxResult">
            </div>
        </div>
    </form>
</body>

Scripts.js / TestPage.aspx

function testCall() 
    $.ajax(
        url: "TestHandler.ashx",
        dataType: 'json',
        success: callbackTestCall
    );
;

function callbackTestCall(payload) 
    document.getElementById("ajaxResult").innerHTML = payload;
;

TestHandler.ashx

public class TestHandler : IHttpHandler

    public void ProcessRequest(HttpContext context)
    
        javascriptSerializer jss = new JavaScriptSerializer();
        Random random = new Random();

        string actualData = random.Next(2001).ToString();

        context.Response.ContentType = "text/plain";
        context.Response.CacheControl = "no-cache";

        context.Response.Write(jss.Serialize(actualData));
    

    public bool IsReusable
    
        // Whether or not the instance can be used for another request
        get  return true;

如果您需要更多信息，请告诉我。

【讨论】：

我编写的代码适用于 asp.net c#，但您可以将其调整为您使用的语言，我试图为您提供一种干净/简单的方法来更新 div。您使用哪种语言？我使用 jquery 和 php。我从来没有用 asp.net 或 c# 做过任何事情。我正在查看您的代码，并且看起来很完整和详细（谢谢）我真的不明白发生了什么

以上是关于如何使用 ajax 和 jquery 更新特定的 div的主要内容，如果未能解决你的问题，请参考以下文章

是否可以为特定的 jQuery Ajax 调用禁用 Turbolinks 以防止页面刷新和滚动？

复选框状态更改时如何更新mysql字段？使用 jquery (ajax)、php 和 mysql

如何使用 JQuery 使用 Ajax 函数更新每个 div 元素

如何使用 jQuery ajax() 方法异步提交验证用户登录

如何在此 Codeigniter 应用程序中通过 jQuery Ajax 加载特定数据，而不是整个页面？

如何在使用 AJAX、Django REST API 和 jQuery 以模式形式更新记录时显示外键字段名称而不是 ID