Ajax异步请求的各种使用情况

首先介绍下Ajax的各项参数:

url : 发送请求的地址  (默认: 当前页地址)

data :发送到服务器的数据 (必须为 Key/Value 格式)

type : 请求方式 ("POST" 或 "GET"), 默认为 "GET"。

dataType :

预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如XML MIME类型就被识别为XML。在1.4中,JSON就会生成一个JavaScript对象,而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:

"xml": 返回 XML 文档,可用 jQuery 处理。

"html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。‘‘‘注意:‘‘‘在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

"json": 返回 JSON 数据 。(推荐使用)

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

"text": 返回纯文本字符串

succes :请求成功后的回调函数

1  $.ajax()的方式(推荐使用)

$(".del").click(function(){
        var vedio_this = $(this).closest("tr");
        var vedio_id = $(this).closest("tr").attr("id");
        if(confirm("删除后将无法恢复,您确定删除?")){
            $.ajax({
                url:$("#url").val()+"/del_vedio", // 发送请求的地址  (默认: 当前页地址)
                data:{  //发送到服务器的数据
                    vedio_id:vedio_id
                },
                type:"POST",    //请求方式,后台服务器获取的方式为$_POST["vedio_id"],注:默认为GET
                dataType:"json",  //返回的数据类型为json
                success:function(data){  //请求成功后的回调函数
                    if(data.code=="a"){
                        vedio_this.remove();
                        alert("删除成功");
                    }else{
                        alert("删除失败");
                    }
                }
            });
        }

    });

请求成功后的返回函数也可以$.ajax().done(function(){})来代替:

$(".del").click(function(){
        var vedio_this = $(this).closest("tr");
        var vedio_id = $(this).closest("tr").attr("id");
        if(confirm("删除后将无法恢复,您确定删除?")){
            $.ajax({
                url:$("#url").val()+"/del_vedio", // 发送请求的地址  (默认: 当前页地址)
                data:{  //发送到服务器的数据
                    vedio_id:vedio_id
                },
                type:"POST",    //请求方式,后台服务器获取的方式为$_POST["vedio_id"],注:默认为GET
                dataType:"json"  //返回的数据类型为json
            }).done(function(data){  //请求成功后的回调函数
                if(data.code=="a"){
                    vedio_this.remove();
                    alert("删除成功");
                }else{
                    alert("删除失败");
                }
            });
        }
    });

2  $.post(url,[data],[callback],[datatype])方式  这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。

注:datatype如果不写的话默认是txet

$(".del").click(function(){
        var vedio_this = $(this).closest("tr");
        var vedio_id = $(this).closest("tr").attr("id");
        if(confirm("删除后将无法恢复,您确定删除?")){
            $.post(
                $("#url").val()+"/del_vedio",  //url
                {vedio_id:vedio_id},    //data
                function(data){  //请求成功后的回调函数
                    if(data.code=="a"){
                        vedio_this.remove();
                        alert("删除成功");
                    }else{
                        alert("删除失败");
                    }
                },
                "json"  //dataType
            );
        }
    });

3  $.get(url,[data],[callback],[datatype])方式,,这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。

注意:后台接收数据时,要用$_GET[" "]接收

$(".del").click(function(){
        var vedio_this = $(this).closest("tr");
        var vedio_id = $(this).closest("tr").attr("id");
        if(confirm("删除后将无法恢复,您确定删除?")){
            $.get(
                $("#url").val()+"/del_vedio",  //url
                {vedio_id:vedio_id},    //data
                function(data){  //请求成功后的回调函数
                    if(data.code=="a"){
                        vedio_this.remove();
                        alert("删除成功");
                    }else{
                        alert("删除失败");
                    }
                },
                "json"  //dataType
            );
        }
    });

4   $.getJSON(url,[data],[callback])方式    注:data可选

5   $.getScript(url,[callback])方式   注:callback可选        通过 HTTP GET 请求载入并执行一个 JavaScript 文件。

$.getScript("test.js", function(){
  alert("Script loaded and executed.");
});

6   $.load(url,[data],[callback])方式    注:data和callback可选    载入远程 HTML 文件代码并插入至 DOM 中

如:

$("#feeds").load("feeds.html");

再如:

 $("#feeds").load("feeds.php", {limit: 25}, function(){
   alert("The last 25 entries in the feed have been loaded");
 });
时间: 2024-12-18 08:15:06

Ajax异步请求的各种使用情况的相关文章

原生ajax异步请求基础知识

一.同步交互与异步交互的概念: * 同步交互:客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户不能做任何其他事情(只能等待响应完才能继续其他请求). * 异步交互:客户端向服务器端发送请求,直到服务器端进行响应,这个过程中,用户可以做其他任何事情(不等): 同步与异步的区别: * 同步交互 1.执行速度相对比较慢 2.响应的是完整的HTML页面 * 异步交互 1. 执行速度相对比较快 2. 响应的是部分数据 二.AJAX的概念:(Asynchronous JavaScript an

通过jquery的ajax异步请求接收返回json数据

jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以. 代码示例如下: $('#send').click(function () { $.ajax({ type : "GET", url : "a.php", dataType : "jsonp", success : function (data) { $.

ajax异步请求302分析

1.前言 遇到这样一种情况,打开网页两个窗口a,b(都是已经登录授权的),在a页面中退出登录,然后在b页面执行增删改查,这个时候因为授权原因,b页面后端的请求肯定出现异常(对这个异常的处理,进行内部跳转处理),b页面中的ajax请求的回调中就会出现问题,今天遇到了,有种恍然大悟的感觉,打开以前公司的网站发现全都没做任何处理...... 没遇到过错误,永远不知道错误会什么时候出现. 2.问题:在ajax异步请求中,如果服务端出现内部跳转,如何在回调中处理 我们先来看这样一个简单的ajax异步请求

ajax 异步请求四个步骤

ajax异步请求详解 ajxa定义:异步的JavaScript和xml 1.XMLHttpRequst的出现才有了异步处理 2.创建XmlHttpRequest对象 var request=new XMLHttpRequest(); 注意:如果要兼容IE6以下浏览器则需要编写如下代码 var request; if(window.XMLRequest){ request=new XMLRequestHttpRequest();  //IE7.IE8.360等 }else{ request=new

如何使用angularjs实现ajax异步请求

Sample.html <!DOCTYPE html> <html ng-app="myApp"> <head> <title>form</title> <script type="text/javascript" src="js/angular.min.js"></script> </head> <body> <form name=

MVC的Ajax异步请求

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 @using (Ajax.BeginForm("GetTime","order",new AjaxOptions()           {               Confirm="你确认这么做吗?",               HttpMethod="post",               OnSuccess

MVC&amp;WebFomr对照学习:ajax异步请求

写在前面:由于工作需要,本人刚接触asp.net mvc,虽然webform的项目干过几个.但是也不是很精通.抛开asp.net webform和asp.net mvc的各自优劣和诸多差异先不说.我认为虽然mvc和webform有诸多不同,但是也只是为了达到相同的目的而在各自的机制下采取了不同的手段而已.更何况它们都是基于asp.net框架的.因此在解决mvc开发过程中的问题时,我很容易联想到在webform下同样的问题是如何解决的.以此来作为对照.我姑且把这种方法叫做迁移学习法吧.我以"小孩之

ajax 异步请求

<script type="text/javascript" > var http_request = false; function send_request(url){ http_request = false; if(window.XMLHttpRequest){ //Mozilla浏览器 http_request = new XMLHttpRequest(); if(http_request.overrideMimeType){ http_request.overr

SpringMVC环境下实现的Ajax异步请求(JSON格式数据)

一 环境搭建 首先是常规的spring mvc环境搭建,不用多说,需要注意的是,这里需要引入jackson相关jar包,然后在spring配置文件"springmvc-servlet.xml"中添加json解析相关配置,我这里的完整代码如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schem