Question

我在网站上工作，它有一个框架。想想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';
    });
});

load html包含此

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

有什么建议吗？

Answer 1

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

如果你在Razor上使用MVC，它看起来像这样

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; }
    }
}

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

Answer 2

这是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/

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

2 个答案: