Ajax

Ajax via jQuery

,Ajax using jQuery

Web page by Kevin Harris of Homer IL

Please contact Kevin Harris of Homer IL concerning this web site

This page is about using jQuery to perform Ajax data access. Visit the jQuery - Ajax page for documentation on using jQuery to perform Ajax calls.

The code below uses the load() function to load a text file into a web page.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
	<head>			
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script>
			// Load text file with load() function
			$(function() {
				$("#theBtn a").click(function(e){	
					var url="test.txt";
					e.preventDefault();
					console.log("clicked");
					$("#output").load(url);
				});
			});
		</script>
	</head>
	<body>	
		<div id="theBtn"><a href="">Click Here</a></div>
		<div id="output"></div>
	</body>
<html>

The code below uses the load() function to load a string containing the datetime from an MVC action into a span tag on the web page.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
@Styles.Render("~/Content/css")
<div class="container">
    <div class="row">
        <div class="col-md-12">
            DateTime is: <span id="spnDateTime"></span>
        </div>
    </div>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script>
    $(function () {
        var url = "@Url.Action("GetDateTime", "Home", new { Area = "" })";
        $("#spnDateTime").load(url);
    });
</script>


Index.cshtml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
using System;
using System.Web.Mvc;

namespace LoadDateTime.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }


        public String GetDateTime()
        {
            return DateTime.Now.ToString();
        }

    }
}


HomeController.cs

The code below uses the load() function to load a string containing the datetime when a button is clicked. The string is obtained from an MVC action and put into a span tag. A callback function is used with the load to return the status and the XMLHttpRequest object.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
@Styles.Render("~/Content/css")
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <input id="btnDateTime"type="button" value="Get DateTime" class="btn btn-primary"/> 
        </div>
    </div>

    <div class="row" style="margin-top: 30px;">
        <div class="col-md-12">
            DateTime is: <span id="spnDateTime"></span>
        </div>
    </div>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script>
    $(function () {
        $("#btnDateTime").click(function (e) {
            e.preventDefault();
            var url = "@Url.Action("GetDateTime", "Home", new { Area = "" })";
            $("#spnDateTime").load(url, function(responseText, status, xhr) {
                console.log("responseText=" + responseText); //4/26/2017 5:28:51 AM
                console.log("status=" + status);  // success
                console.log( xhr); // XMLHttpRequest Object
            });
        });
    });
</script>


Index.cshtml

The code below uses the ajax() function to load a string containing the datetime from an MVC action into a span tag on the web page.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
@Styles.Render("~/Content/css")
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <input id="btnDateTime"type="button" value="Get DateTime" class="btn btn-primary"/> 
        </div>
    </div>

    <div class="row" style="margin-top: 30px;">
        <div class="col-md-12">
            DateTime is: <span id="spnDateTime"></span>
        </div>
    </div>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script>
    $(function () {
        $("#btnDateTime").click(function (e) {
            e.preventDefault();
            var url = "@Url.Action("GetDateTime", "Home", new { Area = "" })";
            $.ajax(url, {
                success: function (data) {
                    console.log(data);
                    $("#spnDateTime").append(data);
                },
                error: function(data) {
                    console.log(data)
                    $("#spnDateTime").append(data.statusText);
                }
            })
        });
    });
</script>
Tags: 
Error | ASP.NET Developer

Error

Error message

  • Warning: Cannot modify header information - headers already sent by (output started at /srv/disk9/1218369/www/kcshadow.net/aspnet/includes/common.inc:2748) in drupal_send_headers() (line 1232 of /srv/disk9/1218369/www/kcshadow.net/aspnet/includes/bootstrap.inc).
  • PDOException: SQLSTATE[42000]: Syntax error or access violation: 1142 INSERT command denied to user '1218369_b2cf'@'185.176.40.58' for table 'watchdog': INSERT INTO {watchdog} (uid, type, message, variables, severity, link, location, referer, hostname, timestamp) VALUES (:db_insert_placeholder_0, :db_insert_placeholder_1, :db_insert_placeholder_2, :db_insert_placeholder_3, :db_insert_placeholder_4, :db_insert_placeholder_5, :db_insert_placeholder_6, :db_insert_placeholder_7, :db_insert_placeholder_8, :db_insert_placeholder_9); Array ( [:db_insert_placeholder_0] => 0 [:db_insert_placeholder_1] => cron [:db_insert_placeholder_2] => Attempting to re-run cron while it is already running. [:db_insert_placeholder_3] => a:0:{} [:db_insert_placeholder_4] => 4 [:db_insert_placeholder_5] => [:db_insert_placeholder_6] => http://www.kcshadow.net/aspnet/?q=ajax2 [:db_insert_placeholder_7] => [:db_insert_placeholder_8] => 54.198.41.76 [:db_insert_placeholder_9] => 1534839448 ) in dblog_watchdog() (line 160 of /srv/disk9/1218369/www/kcshadow.net/aspnet/modules/dblog/dblog.module).
The website encountered an unexpected error. Please try again later.