关闭

jQuery-AJAX

标签: jqueryajax
199人阅读 评论(0) 收藏 举报
分类:

AJAX是服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。
AJAX Asynchronous JavaScript and XML
在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示
使用AJAX的应用程序: 谷歌地图等。
jQuery load()方法
$(“#div1”).load(“demo_test.txt #p1”);
把”demo_test.txt”文件中id=”p1”的元素的内容,加载到指定的

元素中。

回调函数可以设置不同的参数:
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

  $("button").click(function(){ $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("External content loaded successfully!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});  

jQuery -AJAX get()和post()方法
HTTP 请求:GET vs. POST

两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。

$.get(URL,callback);

必需的 URL 参数规定希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据:

$("button").click(function(){ $.get("demo_test.php",function(data,status){
    alert("Data: " + data + "nStatus: " + status);
  });
});
$.get() 的第一个参数是请求的 URL     ("demo_test.php")。  

第二个参数是回调函数。第一个回调参数存有被请求页面的内容,第二个回调参数存有请求的状态。

jQuery $.post()方法

$.post(URL,data,callback);

必需的 URL 参数规定希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据:

$(document).click(function(){
    $("button").click(function(){
        $.post("demo_test.html",{
            name:"Duck",
            city:"Beijing"
        },
        function(data,status){
            alert("Data"+data+"status:"+status);
        });
    });
});
$.post() 的第一个参数是我们希望请求的 URL ("demo_test.html")。
然后我们连同请求(name 和 city)一起发送数据。

"demo_test.html" 中的html脚本读取这些参数,对它们进行处理,然后返回结果。

第三个参数是回调函数。第一个回调参数存有被请求页面的内容,而第二个参数存有请求的状态。
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

jquery-ajax数据交换

$(function () { //方法1:使用ajaxStart方法定义一个全局的“加载中。。。”提示 //注意:所有的ajax提交都会触发ajaxStart事件,都...
  • evelen
  • evelen
  • 2017-04-28 18:21
  • 108

基础知识之JQUERY-AJAX

1、什么是JSONP? 要了解JSONP,不得不提一下JSON,那么什么是JSON ? JSON is a subset of the object literal notation of Jav...
  • hanjianqiang2468
  • hanjianqiang2468
  • 2016-09-21 21:42
  • 89

jQuery-Ajax的一点小经验

前几天给一个师弟做网站前台设计指导,在演示AJAX提交的时候,在桌面上右键新建了一个HTML文件,将表单数据提交到本地配置的站点中的aaa.php文件,测试以失败告终,对url地址检查了一遍又一遍,对...
  • kkkkk22333
  • kkkkk22333
  • 2015-12-10 12:55
  • 54

Jquery-Ajax实例分析加注释

最近在看一些lightbox的插件,里面利用到了jquery和Ajax结合使用展示图片的实例,就从网上找到了一篇实例文章,代码中有些地方给加入了注解。            html代码如下所示: ...
  • wyj880220
  • wyj880220
  • 2014-02-27 09:42
  • 1368

jQuery-Ajax用户登录功能的实现

前几天把jbox源码修改成仿QQ空间模拟窗口后发现有很多人在关注。今天就贴一下我利用该模拟窗口实现的用户登录功能的代码。 ok,先来贴几张张效果图。   其中大致流程是用户点击页面右上角的登...
  • d_hongran
  • d_hongran
  • 2015-04-01 17:52
  • 377

jQuery-ajax内各个参数详情--有道笔记整理

url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。 type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put...
  • want_water_fish
  • want_water_fish
  • 2015-11-19 17:06
  • 242

前端 jquery-ajax 的简单案例分析和总结

ajax,顾名思义:异步的 JavaScript 和 XML。在不重新加载整个页面的情况下,AJAX 是与服务器交换数据并更新部分网页的艺术。ajax特别适合用在那些需要不刷新页面形式一定功能的页面中...
  • lensgcx
  • lensgcx
  • 2017-01-20 13:48
  • 3277

前端 jquery-ajax 的简单案例分析和总结

ajax,顾名思义:异步的 JavaScript 和 XML。在不重新加载整个页面的情况下,AJAX 是与服务器交换数据并更新部分网页的艺术。ajax特别适合用在那些需要不刷新页面形式一定功能的页面中...
  • Nathan_f
  • Nathan_f
  • 2017-07-16 21:53
  • 195

【颗粒归仓】(三)原生ajax和jquery-ajax方法的对比

其实原理一样 只不过使用的区别有 1、jquery 封装了所有浏览器创建xmlhttpRequest对象的方式,javascirpt 要去判断下。 2、jquery 封装了发送请求的方式,javasc...
  • u013047584
  • u013047584
  • 2016-05-21 18:06
  • 1229

关于jquery序列化表单的使用,以及jquery-ajax上传文件

文件上传       (function($){       $.fn.serializeJson=function(){         ...
  • leozhou13
  • leozhou13
  • 2015-12-11 18:05
  • 351
    个人资料
    • 访问:38189次
    • 积分:1174
    • 等级:
    • 排名:千里之外
    • 原创:83篇
    • 转载:8篇
    • 译文:0篇
    • 评论:7条
    文章分类