How to update a specific div with ajax and jquery

前端未结

关注

 2  507

I\'m working on site and it has a fram. think of the gmail frame. And much like the gmail app I want only the inner div to be updated when clicking links on the navbar. I\'ve go

相关标签:

2条回答

执念已碎

2021-01-23 15:16
Here's the Jquery ajax link http://api.jquery.com/jQuery.ajax/

Eg Code :
```
ajax_control = jQuery.ajax({
    url: "target.php",
    type: "POST",
    data: {variable_name: variable_value}
});
ajax_control.always(function(){
    $('#content').html(ajax_control.responseText);
});
```
By assigning the call to a variable ("ajax_control" in the above example), you can abort whenever you want, by using :
```
ajax_control.abort();
```
http://api.jquery.com/jQuery.post/ http://api.jquery.com/jQuery.get/
0 讨论(0)
发布评论:

提交评论
- 加载中...

渐次进展

2021-01-23 15:27

I don't like to answer with links, nor just text, so here is an example of how can you make a div/table or mostly any html container to change it's content.

If you're using MVC with Razor it'd look like this

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>

...and if you want to do it using classic ASP.NET, it'd be like this:

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

If you need further information please, let me know.

0 讨论(0)