ajax与jquery

Ajax:Ajax百度百科含义链接:

1.数据的传递 

2.是一种无刷新加载页面的技术,更新部分网页。

缺点:可能会对于后退功能失效,无法回到上一页面的状态。

  Ajax须知:JSON  和 xml

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式

1.具有严谨的写法

2.键值对表示(类似map中的键值对)

{
    "name": "中国",
    "province": [{
        "name": "黑龙江",
        "cities": {
            "city": ["哈尔滨", "大庆"]
        }
    }, {
        "name": "广东",
        "cities": {
            "city": ["广州", "深圳", "珠海"]
        }
    }, {
        "name": "台湾",
        "cities": {
            "city": ["台北", "高雄"]
        }
    }, {
        "name": "新疆",
        "cities": {
            "city": ["乌鲁木齐"]
        }
    }]
}

JSON传输优于xml传输,相同条件下 (下同xml结构)JSON传输更快更轻便

<?xml version="1.0" encoding="utf-8"?>
<country>
    <name>中国</name>
    <province>
        <name>黑龙江</name>
        <cities>
            <city>哈尔滨</city>
            <city>大庆</city>
        </cities>
    </province>
    <province>
        <name>广东</name>
        <cities>
            <city>广州</city>
            <city>深圳</city>
            <city>珠海</city>
        </cities>
    </province>
    <province>
        <name>台湾</name>
        <cities>
            <city>台北</city>
            <city>高雄</city>
        </cities>
    </province>
    <province>
        <name>新疆</name>
        <cities>
            <city>乌鲁木齐</city>
        </cities>
    </province>
</country>

  Ajax 与 jquery

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。

它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

Jquery使用方法与基本使用这里不详细说明。

注意:本例一以下内容都以jquery为写。

 Ajax

Ajax = 异步 JavaScript 和 XML标准通用标记语言的子集)。

优点:在变动大规模页面下 只用更新一小部分和维护数据。

缺点:用户在后退时不能够保存页面的状态,后退和收藏功能会失效。(浏览器不记录动态数据,只记录静态页面)

 Ajax的无刷新

传统加载页面方法

点击后观察地址变化

不使用ajax技术加载页面会改变当前页面的url。使用了ajax加载方式如下:

点击之后观察地址变化

局部进行刷新加载页面。

使用代码如下;

 jquery 的load()方法 加载页面(同上例子ajax所用代码)

load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
        <script type="text/javascript" src="jquery-3.3.1.js"></script>
        <script>
            $(document).ready(function () {
                $("a").click(function () {
                    var url = this.href;
                    var args = {"time":new Date()}
                    $("#div").load(url,args);    //加载事件
                    return false;
                })
                $("#div").css({"border":"solid red","width":"100px","height":"200px "});
            })
        </script>
</head>
<body>
<a href="ajax.txt">click</a>

<div id="div"></div>
</body>
</html>

 ajax.txt

原文地址:https://www.cnblogs.com/CllOVER/p/10351687.html

时间: 2024-10-09 09:08:40

ajax与jquery的相关文章

032.Ajax+Json+Jquery

AjjA: AjaxJ: JSONJ: jQuery -----------------------------------------------JSONJavascript Object NotationJS对象标记 class User{ public int Id{get;set;} public string Name{get;set;} public string Phone{get;set;} // public string HomeAddress{get;set;} // pu

Struts Work With AJAX ON JQUERY

原文地址:http://blog.csdn.net/zhqingyun163/article/details/5208766 项目中想用ajax,于是在网上扒了n多资料,犯了n多错误,从今天上班到现在一直在处理这个问题,终于还是把它解决了. 当我看到页面的ajax显示后,我兴奋异常,为了记录自己学习的ajax历程,也为了让更多的人少走弯路,特写此一文以记之! 废话不说了,为了更好的理解,我重做了一个小的项目,以加深印象.现在就以这个小项目开始我们的ajax之旅. 第一步:创建 名为"ajax&q

通过原生js的ajax或jquery的ajax获取服务器的时间

在实际的业务逻辑中,经常是与时间相关的,而前端能获得的时间有两个:客户端的时间,服务器的时间.客户端时间通过 javascript中的Date对象可以获取,如 Java代码   var dt = new Date(); var tm = dt.getTime(); 那么tm就是客户端的时间,另外也可以通过对应的getFullYear(),getMonth(),getDate()取到对应的年月日等...但这个时间可靠吗?好吧,那取服务器时间吧经常用到的是后台写一个php,jsp,cgi,asp..

web基础知识(二)关于ajax,Jquery传值最基础东西

这次还是一些关于jQuery,ajax前后台传值情况, 是自己在做点小东西过程中遇到的,记录下来为自己也方便别人 列表很多,点击编辑和删除无刷新的进行操作的话,肯定是ajax了,因为无刷新嘛,可能有的朋友会说直接传值,传ID到Action删除不就OK了,用得着写js么,纯粹自己找麻烦嘛. 其实这里重点是无刷新的啦, 这个上传后到这里来,有个预览功能,把本次的全部预览,如果全部刷新的话,那么刚才上传的就不会在这个页面了,so,还是采用无刷新的比较好. 点击编辑跳到一个新的页面的时候有两种方法可以选

web基础知识(三)关于ajax,Jquery传值最基础东西

今天补充一下两个小功能,一个是关于radio单选框的情况,如何在前面选了后,传到后台,编辑修改的时候再次传回来,并且在当时选的那个上:再一个就是关于添加小标签的时候添加接着弹出在下面,并点击出现删除. 一:radio 1 <div class="newlylist"> 2 <div class="newlyhead">图示商品:</div> 3 <div class="newlycontent">&

Ajax使用jQuery与后台交互

Ajax使用jQuery与后台交互 Ajax使用jQuery与后台交互 前言 Ajax Ajax的优点 XmlHttpRequest对象 数据篇 jquery-form的方式提交数据 自定义数据篇 自定义上传的数据 文件篇 前台使用ajaxuploadjs对文件进行上传 后台使用commons-fileuploadjar上传文件 MyFilejava文件 UploadUtiljava工具 JAR包 项目下载路径 后言 前言 Ajax Ajax就是异步JavaScript and XML缩写. A

JavaScript、Ajax与jQuery的关系

简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装,使其更方便使用.jQuery使得JS与Ajax的使用更方便 详细情况: Actually only one of them is a programming language. Javascript is a programming language which is used mainly in

asp.net中ScriptManager自带Ajax与jQuery事件冲突

问题引诉:最近在使用asp.net自带的无刷新提交ScriptManager时,发现一个问题,就是和我自己用jQuery写的一些事件函数和局部刷新相冲突.通过在网上收索,发现很多人都遇到这个同样的问题.最终还是找到的解决的办法,在此我想将其解决的办法分享出来供大家参考. 问题解决办法: 方法1.两者实现都能够实现页面的无刷新效果,所以可以保留其中的一种即可: 方法2.如果必须要两者混合应用,那么在用jQuery绑定事件是就要注意一些了 我们平时在jQuery中绑定事件最常用的方式有以下三种:以c

Ajax 之jquery(4) 入门jQuery之一

这是否意味着如果你尚未成为脚本编程高手,就无法在自己的网站中善用JavaScript 呢?完全不是!本章将向你展示如何利用JavaScript 工具包:借助已经预先编写好的库和函数框架,你会在项目实践中真切地感受到脚本编程的强大.目前有许多工具包可供下载,而且大部分都是免费的.本书选用了可免费下载且开源的实用程序和控件集jQuery(jquery.com)来构建交互式Web 应用程序.我们认为它是最出色的JavaScript 库之一.在接下来的几章中,我们将介绍如何使用jQuery 来拖放页面元

ajax的jquery写法和原生写法

一.ajax的简介 Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写).现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式 . 二.ajax的缺陷 AJAX大量使用了JavaScript和AJAX引擎,而这个取决于浏览器的支持.IE5.0及以上.Mozilla1.0.NetSc