ajax的基础知识

前端之家收集整理的这篇文章主要介绍了ajax的基础知识前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

【定义】:AJAX即“Asynchronous Javascript AndXML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

优点:通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

【格式】

$.ajax({

url: url,

dataType: 'json',

data: data,

success: callback

});


【应用小例子】

1.html页的代码如下

<span style="font-family:KaiTi_GB2312;font-size:18px;"><%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Index</title>
    <%--如果要使用ajax,就必须引入这个脚本--%>
    <script src="../../Scripts/jquery-1.7.1.js"></script>
    <script src="../../Scripts/JavaScript1.js"></script>
</head>
<body>
    <div>
      <input  type="button" id="btnJqGetDate" value="获取时间"/> 
        <hr />
    </div>
</body>
</html>
</span>

2.相应的js代码
<span style="font-family:KaiTi_GB2312;font-size:18px;">//$(function(){}) 是 $(document).ready(function(){}) 的简写,用来在DOM加载完成之后执行一系列预先定义好的函数。 
$(function () {
    //"#btnJqGetDate"这个是从前台html页面读取的元素
    $("#btnJqGetDate").click(function () {
        $.ajax({
            //url:指定路由的路径
            url: "/Ajax/GetDate",type: "Post",//设置的回调函数
            success: function (data) {
                alert(data);
            }
        });
    });
});</span>

3.控制器界面的代码
<span style="font-family:KaiTi_GB2312;font-size:18px;">using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Mvc项目.Controllers
{
    public class AjaxController : Controller
    {
        //
        // GET: /Ajax/

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetDate()
        {
            return Content(DateTime.Now.ToString());
        }

    }
}</span>

4.效果

【小结】

其实有关AJAX这块的知识,前面学习的时候学过,但是当时只是跟着老师依葫芦画瓢似的走了一遍,学习并不深入,导致这次在ITOO项目中,闹不明白前台数据是如何传送的。反思自己的前面的学习,觉得不会那就挂来,学习的很浅薄,于是一到项目中就死翘翘了。为什么这些学过的东西,还是不会用?追其原因,是自己忙着走马观花了,没有掌握。那为什么在学习的时候没有很好的掌握这些个知识点呢?我想这是和我自己的学习方式,思维方式有关系。通过这次将近两个月的ITOO的项目,我深刻的认识到自己在编故事总结这方面还有待提高。

原文链接:https://www.f2er.com/ajax/162457.html

猜你在找的Ajax相关文章