jQuery.ajax( options )

最新推荐文章于 2023-12-11 19:37:09 发布
最新推荐文章于 2023-12-11 19:37:09 发布
阅读量307 收藏
点赞数
分类专栏： Jquery 文章标签： jQuery Ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012135077/article/details/49245937
版权

jQuery.ajax( options )

 

有很多选项，介绍其中的几个：

·dataType：想从服务器得到哪种类型的数据。xml,html,script,json,jsonp,text

·success：请求成功后的处理函数

·type：以POST或GET的方式请求。默认GET。PUT和DELETE也可以用，但并不是所有的浏览器都支持

·url：请求的目的地址，须是一个字符串。

·complete：不管请求成功还是错误，只要请求完成，可以执行的事件。

·beforeSend：传递异步请求之前的事件。

 

这次说解，使用firedebug来配合说解。

（一）请求ashx文件，并添加ajax事件，添加缓冲提示

描述：请求数据，请求超时时间设置为5秒，如果超时，那么输出超时提示，且在这5秒中的等待过程中，提供等图标，5秒之后，提示请求超时。

（1）ashx文件

Customer customer = new Customer

{ Unid = 1, CustomerName = "宋江", Memo = "天魁星", Other = "黑三郎" };

        stringstrJson = Newtonsoft.Json.JsonConvert.SerializeObject(customer);

        System.Threading.Thread.Sleep(1000*7);

       context.Response.Write(strJson);

为了让客户端请求超时，服务设置延时7秒。

（2）ajax post请求

function ajax_ashx() {

   $.ajax({

        url: "webdata/ajax_1.ashx",

        type: "post",

        success: function(data){

            varjsonObject = $.jsonToObject(data);

            vartt = '';

            $.each(jsonObject, function(k, v) {

                tt += k + "：" + v + "<br/>";

            });

            $("#divmessage").html(tt);

        },

        cache: false,

        timeout: 5000,

        error: function(){

            alert("超时");

        }

   });}

设置超时时间5000ms，超时错误出示超时错误。

（3）设置客户端请求等待图标

·<img src="images/loader.gif" id="ajaximg"/>找个小图标

·为这个图标设置ajax事件

$("#ajaximg").bind("ajaxSend", function(){ Show(); });

   $("#ajaximg").bind("ajaxComplete", function(){ Hide(); });

 

function Hide() {

   $("#ajaximg").hide();

}

function Show() {

   $("#ajaximg").show();

}

在客户端5秒请求的时间限制下，请求超时，提示超时错误。

·在ashx端contentType的设置对返回的数据没有影响

·客户端dataType也没有影响，可以省略。

·在firebug里可以看到返回的数据为：

{"Unid":1,"CustomerName":"宋江","Memo":"天魁星","Other":"黑三郎"}

所以可以按以前我说过的方法进行解析。

（二）正常请求，并解析

·ashx

Customer customer = new Customer

{ Unid = 1, CustomerName = "宋江", Memo = "天魁星", Other = "黑三郎" };

        Customercustomer2 = new Customer

{ Unid = 2, CustomerName = "吴用", Memo = "天机星", Other = "智多星" };

 

        List<Customer> _list = newList<Customer>();

        _list.Add(customer);

        _list.Add(customer2);

 

        stringstrJson = Newtonsoft.Json.JsonConvert.SerializeObject(customer);

        System.Threading.Thread.Sleep(1000 * 3);

       context.Response.Write(strJson);

·ajax post

function ajax_ashxList() {

   $.ajax({

       url: "webdata/ajax_1.ashx",

        type: "post",

        dataType: "json",

        success: function(data){

            vartt = '';

            $.each(data, function(k, v) {

            $.each(v, function(kk,vv) {

            tt += kk + "：" + vv + "<br/>";

                });

            });

            $("#divmessage").html(tt);

        },

        cache: false,

        timeout: 5000,

        error: function(){

            alert("超时");

        }

   });

}

·dataType要是json

·在firebug里

[

{"Unid":1,"CustomerName":"宋江","Memo":"天魁星","Other":"黑三郎"},

{"Unid":2,"CustomerName":"吴用","Memo":"天机星","Other":"智多星"}

]

虽然是字串,但这里直接用就行,不用转换为json对象。这一点我现在还不明白怎么回事。

（三）请求ws

这次请求返回字串类型的web方法。

（1）Hello

[WebMethod]

   public stringHelloWorld()

   {

      return "HelloWorld";

   }

 

function ajax_webserviceHello() {

   $.ajax({

        type: "post",

        contentType: "application/json",

        url: "ajax_1.asmx/HelloWorld",

        data: "{}",

        dataType: 'json',

        success: function(data){

            alert(data.d);

        }

   });

}

·contentType，data都不能为空，即使data为空，也要带空参数

 

{"d":"Hello World"}

发现服务端请求到的数据是这样的。所以，访问时，要以data.d来访问。（在.net3.5中）。但也可以如下访问：

$.each(data,function(k, v) {

                alert(v);

            });

 

（2）Customer

这次得到一个客户实体

[WebMethod]

   public stringGetCustomer()

   {

        Customercustomer = new Customer{ Unid = 1, CustomerName = "宋江", Memo = "天魁星", Other = "黑三郎" };

        stringstrJson = Newtonsoft.Json.JsonConvert.SerializeObject(customer);

        returnstrJson;

}

 

function ajax_webserviceCustomer() {

   $.ajax({

        type: "post",

        contentType: "application/json",

        url: "ajax_1.asmx/GetCustomer",

        data: "{}",

        dataType: 'json',

        success: function(data){

            vartt = '';

            varjsonObject = $.jsonToObject(data.d);

            $.each(jsonObject, function(k, v) {

                tt += k + "：" + v + "<br/>";

            });

            $("#divmessage").html(tt);

        }

   });

}

发现返回的也是以d为key的一个object。

 

{"d":"{\"Unid\":1,\"CustomerName\":\"宋江\",\"Memo\":\"天魁星\",\"Other\":\"黑三郎\"}"}

这点应该注意。

（3）customerlist

[WebMethod]

   public stringGetCustomerList()

   {

        Customercustomer = new Customer

{ Unid = 1, CustomerName = "宋江", Memo = "天魁星", Other = "黑三郎" };

        Customercustomer2 = new Customer

{ Unid = 2, CustomerName = "吴用", Memo = "天机星", Other = "智多星" };

 

        List<Customer> _list = newList<Customer>();

        _list.Add(customer);

        _list.Add(customer2);

 

        stringstrJson = Newtonsoft.Json.JsonConvert.SerializeObject(_list);

        returnstrJson;

}

 

function ajax_webserviceCustomerList() {

   $.ajax({

        type: "post",

        contentType: "application/json",

        url: "ajax_1.asmx/GetCustomerList",

        data: "{}",

        dataType: 'json',

        success: function(data){

            vartt = '';

            varjsonObject = $.jsonToObject(data.d);

            $.each(jsonObject, function(k, v) {

            $.each(v, function(kk,vv) {

            tt += kk + "：" + vv + "<br/>";

                });

            });

            $("#divmessage").html(tt);

        }

   });

}

 

 

{

"d":

"[{\"Unid\":1,\"CustomerName\":\"宋江\",\"Memo\":\"天魁星\",\"Other\":\"黑三郎\"},

{\"Unid\":2,\"CustomerName\":\"吴用\",\"Memo\":\"天机星\",\"Other\":\"智多星\"}]"

}

这也是一个以d为key的对象。

（4）with para

[WebMethod]

   public stringGetCustomerListWithPara(int iUnid)

   {

        Customercustomer = new Customer

{ Unid = 1, CustomerName = "宋江", Memo = "天魁星", Other = "黑三郎" };

        Customercustomer2 = new Customer

 { Unid = 2,CustomerName = "吴用", Memo = "天机星", Other = "智多星" };

 

        List<Customer> _list = newList<Customer>();

        _list.Add(customer);

        _list.Add(customer2);

 

        var cus= from q in_list

                  whereq.Unid == iUnid

                  selectq;

 

        stringstrJson = Newtonsoft.Json.JsonConvert.SerializeObject(cus);

        returnstrJson;

   }

 

functionajax_webserviceCustomerListWithPara() {

   $.ajax({

        type: "post",

        contentType: "application/json",

        url: "ajax_1.asmx/GetCustomerListWithPara",

        data: "{iUnid:"+1+"}",

        dataType: 'json',

        success: function(data){

            vartt = '';

            varjsonObject = $.jsonToObject(data.d);

            $.each(jsonObject, function(k, v) {

                $.each(v, function(kk, vv) {

                    tt += kk + "：" + vv + "<br/>";

                });

            });

            $("#divmessage").html(tt);

        }

   });

}

 

{

"d":

"[{\"Unid\":1,\"CustomerName\":\"宋江\",\"Memo\":\"天魁星\",\"Other\":\"黑三郎\"}]"

}

这也是一个以d为key的对象。

综上所述，在对web服务进行请求时：

·在.net3.5中，访问web服务时，返回的元素是一个以d为key的k/v对。如果要进行下一步解析，要认识d属性。（这是在当web方法返回json字串时成立）

·在.net3.5中，访问web服务，要对web服务添加修饰：[System.Web.Script.Services.ScriptService]否则，当.ajax()请求服务时，会有异常：

只能从脚本中调用在类定义上有[ScriptService]属性的 Web 服务

 

 

90后程序媛
关注
专栏目录
jquery.ajax加载js文件,JQuery动态加载Javascript文件
weixin_31036839的博客
08-05 755
largeQ我意识到我在这里有点晚了，(5年左右)，但我认为有一个比接受的更好的答案如下：$("#addComment").click(function(){if(typeofTinyMCE==="undefined"){$.ajax({url:"tinymce.js",dataType:"script",...
Jquery .ajax方法分析
clare504的专栏
10-28 1852
jQuery.ajax( options )   有很多选项，介绍其中的几个： ·dataType：想从服务器得到哪种类型的数据。xml,html,script,json,jsonp,text ·success：请求成功后的处理函数 ·type：以POST或GET的方式请求。默认GET。PUT和DELETE也可以用，但并不是所有的浏览器都支持 ·url：请求的目的地址，须是一个字符串。
jquery的ajax显示HelloWorld
杀客o凹胖
07-12 150
&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%&gt; &lt;!DOCTYPE HTML PUBLIC "-//W3C//
JQuery中的HelloWorld
ych4513979的专栏
01-26 1401
HelloWorld! $(document).ready(function(){ alert("HelloWord!!!"); }) /*//该方法等价于（不用页面加载完成即可调用） $(function(){ alert("HelloWord
jquery Ajax的helloworld例子
mark_to_win的专栏
03-28 204
例 3.5 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <script src="jquery.js"></script> <sc...
jQuery.ajax 跨域请求webapi设置headers的解决方案
01-19
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头、正确响应options请求，正确设置 JavaScript端需要设置的headers信息 方能实现。 1.第一步 服务端设置响应头,在webapi的web.config做如下...
fetcher:WHATWG提取帮助程序，受jQuery.ajax启发
05-23
受到jQuery.ajax的启发。 例子 fetcher . get ( '/api/users' , null , { dataType : 'json' } ) . then ( ( [ value , res ] ) => { //... } ) fetcher . getJSON ( '/api/users' ) . then ( ... ) fetcher . ...
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
10-21
$.ajax()的语法是$.ajax(options)，其中options是一个对象，包含若干个键值对，可以指定url、data、type、dataType等多个选项。dataType指定了返回数据的格式，比如xml、html、script、json等。通过success和error...
JQuery-Ajax 使用
最新发布
weixin_73056048的博客
12-11 628
type：(默认: "GET") 请求方式 ("POST" 或 "GET")， 默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。async：(默认: true) 默认设置下，所有请求均为异步请求。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。post和get的区别就是，get参数会在url后经行传递，且数据量小（一般不会大于2k），post是作为http实体消息实体发送给服务器，且数据量大（理论没有限制）
ajax无论成功不成功执行,JQuery AJAX方法同时执行＆＃34;成功＆＃34;和＆＃34;失败＆＃34;...
weixin_35515918的博客
08-06 573
我有一个AJAX方法告诉用户注册时是否有电子邮件。$('#mainArea_txtEmail').keyup(function (e) {var inputemail = $(this).val();if (inputemail.length > 5){$.ajax({type: "POST",url: "Default.aspx/isEmailAvailable",data: '{emai...
对于Ajax请求出现Options请求解决方法（Fiddler）
往前的娘娘
05-25 2万+
今天突然通过Ajax调用接口出现异常，居然有Options请求，当然了解过，没有实际遇到，后来查询各种得到对于复杂请求它会先进行Options请求，用来试水，如果试水成功，继续真正的请求，否则终止请求，逻辑没有毛病。可是如果服务器没有对于Options适当回应就尴尬，如果在Options就出现403这种影响应该怎么办？ 怎么继续跑下去？ 1、Options出现 发生一次Opt...
Ajax 请求中出现OPTIONS（Request Method: OPTIONS）
热门推荐
qiao
09-03 5万+
背景 做上传文件功能时，在请求上传文件接口之前，会发送一个options的请求。 原因 ajax 请求遵循同源策略（协议、域名、端口必须一致），若突破该限制，会产生跨域行为，设置Access-Control-Allow-Origin: *，可允许客户端跨域访问。 除上述情况外，还有一种请求叫做Preflighted Request（带预检的跨域请求）。 Preflighted Request在...
Ajax中option什么意思,AJAX请求中出现OPTIONS请求
weixin_32864391的博客
08-05 3259
背景有一个前后端分离的VUE项目来发送ajax请求, 查看Nginx日志或使用Chrome Dev Tools查看请求发送情况时, 会看到每次调后台API的请求之前, 都会发送一个OPTIONS请求, 无论API要求请求的方法是GET或POST.为什么会发送这个OPTIONS请求? 困扰了项目组的前端同学和后端同学很久，今天正好听他们说起这个问题，就研究了一下原理。过程首先, 在js代码里是没写要...
Ajax中的OPTIONS 请求
With_Her的博客
12-11 892
浏览器对简单跨域请求和复杂跨域请求的处理： 简单跨域请求： XMLHttpRequest会遵守同源策略(same-origin policy). 也即脚本只能访问相同协议/相同主机名/相同端口的资源, 如果要突破这个限制, 那就是所谓的跨域, 此时需要遵守CORS(Cross-Origin Resource Sharing)机制 如果想允许跨域, 在服务端设置Access-Control-...
JAVA解决OPTIONS请求问题：跨域时ajax发送两次请求，其中options预请求参数为null及其解决方案
沧羽琉璃
11-27 4917
未经允许禁止转载 在正式跨域的请求前，浏览器会根据需要，发起一个“PreFlight”（也就是Option请求），用来让服务端返回允许的方法（如get、post），被跨域访问的Origin（来源，或者域），还有是否需要Credentials(认证信息） 发送option请求的原因 如果跨域的请求是Simple Request（简单请求 ），则不会触发“PreFlight”。Mozill...
无涯教程-jQuery - jQuery.ajax( options )方法函数
无涯教程
07-27 289
jQuery.ajax(options)方法使用HTTP请求加载远程页面。$.ajax()返回它创建的XMLHttpRequest。在大多数情况下，您不需要该对象直接进行操作，但是如果您需要手动中止请求，则可以使用该对象。
Jquery的$.ajax( options )方法
zgscwxd的博客
07-27 4821
Ajax.BeginForm参数详解 使用Ajax.BeginForm方法会生成一个form表单，最后以Ajax的方式提交表单数据；需要用using把该方法括起来，使系统知道form表单从何处开始，何处结束。 在ASP.NET MVC中，Ajax.BeginForm扮演着异步提交的重要角色。其中就有五个重载方法，但是在实际应用中，你未必使用的得心应手，今天我们就从主要的参数来一探究竟。 ...
ajax的跨域问题（出现options请求）
weixin_44724060的博客
04-09 1418
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。 一、简介 CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。 整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值