Jquery的$.ajax( options )方法

最新推荐文章于 2023-11-13 11:22:05 发布
最新推荐文章于 2023-11-13 11:22:05 发布
阅读量4.7k 收藏
点赞数
分类专栏： AJAx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zgscwxd/article/details/97509343
版权

 

Ajax.BeginForm参数详解

使用Ajax.BeginForm方法会生成一个form表单，最后以Ajax的方式提交表单数据；需要用using把该方法括起来，使系统知道form表单从何处开始，何处结束。

在ASP.NET MVC中，Ajax.BeginForm扮演着异步提交的重要角色。其中就有五个重载方法，但是在实际应用中，你未必使用的得心应手，今天我们就从主要的参数来一探究竟。

一，Html.BeginForm(actionName,controllerName,method,htmlAttributes){}

注：所有要提交的内容包括按钮都必须在{ }内

参数

actionName

类型：System.String
操作方法的名称。

controllerName

类型：System.String
控制器的名称。

routeValues

类型：System.Object
一个包含路由参数的对象。 通过检查对象的属性，利用反射检索参数。 此对象通常是使用对象初始值设定项语法创建的。

method

类型：System.Web.Mvc.FormMethod
用于处理窗体的 HTTP 方法（GET 或 POST）。

htmlAttributes

类型：System.Object
一个对象，其中包含要为该元素设置的 HTML 特性。

返回值

类型：System.Web.Mvc.Html.MvcForm
<form> 开始标记。

    @using (Ajax.BeginForm("AjaxTest",
    new AjaxOptions
    {
        Confirm = "你真的想发一个消息吗?",
        HttpMethod = "Post",
        InsertionMode = InsertionMode.InsertAfter,
        UpdateTargetId = "messages",
        OnComplete = "ajaxComplete"
    }))
    {
        @Html.Label("message", "信息")<br />
        @Html.TextArea("message")<br />
        <button type="submit">发送</button>
    }
    <script>
        function ajaxComplete()
        {
            alert("完成");
        }
    </script>

有11个方法重载，下面详解该方法的各项参数：

参数一：AjaxOptions

class类型

说明：配置Ajax的一些选项

举例：

相关属性详解：

属性类型说明
Confirmstring在请求之前会弹出一个提示框，是否确认提交
HttpMethodstring设置请求类型 Get Post
UpdateTargetIdString标明html中一元素的id，把请求返回的数据/元素更新到该元素中
InsertionModeenum把请求结果以何种方式更新到Dom元素中
  ①Replace
  ②InsertBefore
  ③InsertAfter
  不设置的情况下，默认是Replace，只有在UpdateTargetId被设置后才有效
LoadingElementIdstring标明html中一元素的id，在请求过程中，该元素会显示出来，请求结束后又隐藏
LoadingElementDurationInt控制Loading动画在显示/隐藏时的动画持续时间，单位为毫秒；
  默认情况下，动画将淡入淡出；这个时间即淡入淡出的时间（但经测试无效！！！）
OnBeginstring标明js中一function的名称，在Ajax请求发送前，执行该方法，对应JQuery的beforeSend
OnCompleteString标明js中一function的名称，在请求成功时，执行该方法，对应JQuery的complete
OnFailureString标明js中一function的名称，在请求失败时，执行该方法，对应JQuery的error
OnSuccessString标明js中一function的名称，无论请求成功与否，都在请求完成时，执行该方法，对应JQuery的success
UrlString请求的地址
AllowCacheBool是否使用缓存

在BeginForm的11个重载方法中，有一方法中只有AjaxOptions一个参数，如果不指定Url，则生成的form表单的action属性没有值，就默认把数据提交到当前页，否则就以Url为请求地址，其他重载方法中都需要指定actionName及controllerName（可选）。

参数二：actionName

string类型

说明：指定请求地址的Action名称

参数三：routeValues

object、RouteValueDictionary类型

说明：将传入到Controller中方法的参数

支持上述两种数据类型：

object类型可以在使用时直接以匿名类方式声明，使用非常方便

举例：

new { id = 1, type = 1 }
  •  

RouteValueDictionary类型实现了IDictionary<string, object>接口，因此在使用时可以用键值对方式声明

举例：

new RouteValueDictionary{ {"id", 1}, {"type", 1} }

生成的路径：/Home/Index/1?type=1

因为“id”是在路由规则中配置的名称，因此显示在路由规则对应的位置，“type”则在问号后面

参数四：htmlAttributes

object、IDictionary<string, object>类型

说明：html属性，生成form表单时，会把键值对添加到form表单的属性中；

支持上述两种数据类型：

object类型可以在使用时直接以匿名类方式声明，使用非常方便

举例：

new{id = "frm", @class = "cls" } 由于class是C#中的关键字，因此需要在前面加@符号

IDictionary<string, object>类型使用灵活，可以在一个地方声明，多个地方调用，或修改后使用

举例：

Dictionary<string, object> htmlAttr = new Dictionary<string, object>
 {

     {"id", "frm"},

     {"class", "cls"}

 };

生成的代码：

<form action="/Home/Index/1?type=1" class="cls" data-ajax="true" id="frm" method="post">

参数五：controllerName

string类型

说明：指定请求地址的Controller名称

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Ajax.BeginForm 的用法

 

在mvc 项目中，我们经常会用到 Ajax.BeginForm() 标签， 它会生成一个 form 标签，但这个form 标签与 普通的 form 标签不同，它是一个ajax form 标签

Ajax.BeginForm("index","home" ,new AjaxOptions{ Confirm="",HttpMethod="post", InsertionMode=InsertionMode.Replace, LoadingElementDuration=200, LoadingElementId="tb2", OnBegin="begin", OnComplete="complete", OnFailure="error", OnSuccess="success", UpdateTargetId="tb3", Url="/home/index" })
 

AjaxOptions 参数的含义依次是：

Confirm： string 类型， 获取或设置在提交请求之前显示在确认窗口中的消息

HttpMethod： string 类型 获取或设置Http请求方法（ get或post)

InsertionMode: System.Web.Mvc.Ajax.InsertionMode 是个枚举  获取或设置指定响应如何将响应插入目标DOM元素的模式，
有三种，

InsertionMode.InsertAfter：在元素后插入

InsertionMode.InsertBefore 在元素前插入

InsertionMode.Replace 替换元素

LoadingElementDuration：int 类型 单位毫秒， 表示在加载或隐藏元素时，动画持续的时间

LoadingElementId：stting 类型   在加载 Ajax函数时要显示的HTML元素的Id特性

OnBegin：string 类型 在更新页面之前立即调用的 javascript 函数名称

OnComplete： string 类型 在实例化相应数据之后但在更新页面之前，要调用的javascript 函数名称

OnFailure：string 类型 在页面调用失败时，要调用的javascript 函数的名称

OnSuccess：string 类型 在成功更新页面之后，要调用的javascript 函数的名称

UpdateTargetId：string 类型 获取或设置使用服务响应来更新的DOM元素的ID

Url： string 类型， 获取或设置要向其发送请求的URL
 

Ajax.BeginForm("AjaxTest",
    new AjaxOptions
    {
        Confirm = "你真的想发一个消息吗?",
        HttpMethod = "Post",
        InsertionMode = InsertionMode.InsertAfter,
        UpdateTargetId = "messages",
        OnComplete = "ajaxComplete"
    })

 

 

AjaxController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace AjaxWebApplication.Controllers
{
    public class AjaxController : Controller
    {
        // GET: Ajax
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult AjaxTest(string message)
        {
            return PartialView((object)message);
        }



    }
}

 

Index.cshtml

 

<section>
    <h3>使用AJAX ASP.NET MVC的示例</h3>
</section>
<section>
    <div id="messages">
    </div>
    @using (Ajax.BeginForm("AjaxTest",
    new AjaxOptions
    {
        Confirm = "你真的想发一个消息吗?",
        HttpMethod = "Post",
        InsertionMode = InsertionMode.InsertAfter,
        UpdateTargetId = "messages",
        OnComplete = "ajaxComplete"
    }))
    {
        @Html.Label("message", "信息")<br />
        @Html.TextArea("message")<br />
        <button type="submit">发送</button>
    }
    <script>function ajaxComplete() {
            alert("完成");
        }</script>
</section>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

通过 HTTP 请求加载远程数据，jQuery 的底层 Ajax 实现。

1,$.ajax()方法是jQuery中最底层的Ajax实现，load()、$.get()、$.post()、$.getScript()和$.getJSON()这些方法，都是基于$.ajax()方法构造的，它的语法为：$.ajax(options) 

示例：

$.ajax({

            type: “GET”,//设置请求方式

            url: “9-8.js”, //设置请求的URL  

            dataType: “script”//设置返回数据的类型

})
 

2,用法举例

function Ajax(){ $.ajax({
  type: "GET",
  url: "9-14.asp",
  data: "user="+escape($("#user").val())+ "&comment="+escape($("#comment").val()),
  beforeSend:function(){ $("#target").html("<img src='loading.gif' /><br>正在载入…");}, 
  error:function(){$("#target").html("<p>载入失败</p>");},
  success: function(data){ //请求成功时
  $("#target").html(data);
} }); }


beforeSend：发送请求之前调用的回调函数，该函数接受一个惟一的参数，即XMLHttpRequest对象作为参数。

success：在请求成功时调用的回调函数，该函数接受两个参数，第一个参数为服务器返回的数据data，第2个参数为服务器的状态textStatus。
error请求失败时调用的回调函数。
complete请求完成时调用的回调函数（无论请求是成功还是失败），如果同时设置了success或error，则在它们执行完之后才执行complete中的回调函数。
 

当一个页面中有多个地方都需要利用Ajax方法进行异步通信时，可以利用$.ajaxSetup(options)方法统一设定所有Ajax方法中的参数   $.ajaxSetup({type: "GET", url:"10-13.asp“  });

① $.ajax()方法中的data数据一般不能用$.ajaxSetup(options)方法统一设定，因为传送给服务器的数据是用户在表单中输入的，每次都不同，而$.ajaxSetup(options)方法只会在页面初始化时运行一次，此时用户还没有输入数据，因此会获取不到。
② $.ajaxSetup(options)方法不能设置load()方法的相关操作，如果设置请求类型type为"GET"，也不会改变$.post()方法采用POST方式。

 

 

 

 

zgscwxd
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入理解jquery的$.extend()、$.fn和$.fn.extend()
10-19
在jQuery中，`$.extend()`、`.fn`（即`jQuery.fn`）和`.fn.extend()`是开发者用于增强其功能和创建插件的关键部分。下面我们将详细探讨这三个概念。 1. `$.extend()` `$.extend()`方法用于合并一个或多个对象的属性...
jQuery中的$.ajax()方法参数详解
IT全栈 华强工作室
08-20 6409
jQuery中的$.ajax()方法参数详解ajax是异步更新，只需要进行少量的数据交互便可到达页面的局部刷新。其可用参数主要如下：1.url:要求为String类型的参数，（默认为当前页地址）发送请求的地址。2.type:要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。3.time
jQuery之$.ajax()方法详解
qq_43165760的博客
01-14 2774
ajax不管是前端，还是后台都是要学习的知识点，也是必用知识点。ajax是异步更新，只需要进行少量的数据交互便可到达页面的局部刷下。非常棒。 1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。 3....
jq实现ajax(全)
BaseLike的博客
08-22 2417
学过js实现ajax的人都知道，写起来是十分的麻烦的，所以企业开发都会推荐jq来实现该功能。所以不用说，我们都知道，本文要讲的东西需要引入jq库。 一、$ajax方式 前台写法： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UT
jquery 操作option总结
shenyingkui的专栏
09-23 1229
1、获取选中select的value和text,html代码如下：  代码如下 复制代码 one two three jquery select操作  代码如下 复制代码 $("#mySelect").val(); //获取选中记录的value值 $("#mySelect option:
$.ajax()方法详解
热门推荐
上善若泪
09-06 8万+
目录 1 Ajax操作 1.1 $.ajax 1.2 简便写法 1.2.1 $.get()，$.post() 1.2.2 $.getJSON() 1.2.3 $.getScript() 1.3 Ajax事件 1.4 返回值 1.5 中文乱码 1.5.1 解决方法一 1.5.2 解决方法二 1 Ajax操作 1.1 $.ajax jQuery对象上面还定义了Ajax方法（$.ajax()），用来处理Ajax操作。调用该方法后，浏览器就会向服务器发出一个HTTP请求。 $.aj
jquery自定义类似$.ajax()的方法实现代码
12-08
这里我们将详细探讨如何使用jQuery的 `$.extend()` 方法来实现一个类似于 `$.ajax()` 的自定义方法 `$.testgogo()`。 首先，让我们分析给定的代码片段： ```javascript $.extend({ testgogo: function(options) {...
Jquery中$.post和$.ajax的用法小结
01-19
Jquery的$.ajax的用法： jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据，这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。 $.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况...
解决JQurey跨域问题$.get|$.post|$.getJSON等等统统可跨域
04-11
本篇将详细介绍如何解决jQuery跨域问题，涉及的方法包括$.get、$.post和$.getJSON等。 首先，我们需要理解什么是跨域。同源策略是浏览器为保障安全而实施的一项机制，它规定JavaScript只能访问与当前页面同源（协议...
jquery_gatherajax:这个插件通过每个数据收集 $.ajax 方法，例如。）添加编辑删除
07-14
这个插件通过每个数据收集 $.ajax 方法，例如。）添加编辑删除 构造gatherajax var options = { name : "opt" , url_base : "/option" , // String : for all_ajax url base add_type : { add : { url : "/...
$.ajax()实现ajax语法格式及完整案例
pig_pig32的博客
08-23 3565
$.ajax()代码模板 jQuery实现ajax语法为：$.ajax({})，其中{}为对象，对象里面的key键是固定的，比如: 1、type: 表示请求方式，一般为post或get 2、url表示请求的地址 3、contentType表示发送信息至服务器时内容编码类型 4、data表示发送到服务器的数据 5、dataType表示预期服务器返回数据的类型如：text，json，xml等等类型 6、success表示请求成功后的回调函数 7、error自动判断 (xml 或 html)。请求失败时调用此函数
jQuery中的Ajax
weixin_45375510的博客
10-11 4495
jQuery×Ajax jquery提供多个与ajax有关的方法，通过jquery ajax方法，能够使用HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML或JSON，同时能够把接收的数据更新到DOM对象。代替XMLHttpRequest，但其实jquery还是封装的异步对象。 (1)$.ajax() $.ajax()是jquery中ajax请求的核心方法，所有的其他方法都是在内部使用此方法。 语法： $.ajax({key: value, key: value, ...})
jquery的函数实现Ajax
兮遥
08-21 1079
1、$.ajax() $.ajax() 是 jQuery 中 AJAX 请求的核心方法，所有的其他方法都是在内部使用此方法。 语法： $.ajax( { name:value, name:value, ... } ) async ： 布尔值，表示请求是否异步处理。默认是 true (可以不写) contentType ：发送数据到服务器时所使用的内容类型。默认是"application/x-www-form-urlencoded"。 data：规定要发送到服务器的数据，可...
ajax 参数详解
tianxingjian0509的博客
04-05 2506
ajax请求参数解析 1、url [Object] 一个用来包含发送请求的URL字符串 2、accepts [Map] 默认：取决于数据类型 内容类型发送请求头，告诉服务器什么样的响应会被接收返回。如果accepts设置需要修改，推荐在$.ajaxSetup()方法中做一次 3、async [Boolean] 默认：true 默认设置下，所有请求均为异步请求，如果需要发送同步请求，请将此选项设置为false。注意，如果需要发送同步请求。将此选项设置为false。注意，同步请求将锁
Ajax中option什么意思,AJAX请求中出现OPTIONS请求
weixin_32864391的博客
08-05 3181
背景有一个前后端分离的VUE项目来发送ajax请求, 查看Nginx日志或使用Chrome Dev Tools查看请求发送情况时, 会看到每次调后台API的请求之前, 都会发送一个OPTIONS请求, 无论API要求请求的方法是GET或POST.为什么会发送这个OPTIONS请求? 困扰了项目组的前端同学和后端同学很久，今天正好听他们说起这个问题，就研究了一下原理。过程首先, 在js代码里是没写要...
无涯教程-jQuery - jQuery.ajax( options )方法函数
无涯教程
07-27 264
jQuery.ajax(options)方法使用HTTP请求加载远程页面。$.ajax()返回它创建的XMLHttpRequest。在大多数情况下，您不需要该对象直接进行操作，但是如果您需要手动中止请求，则可以使用该对象。
jq里的ajax超详细参数讲解
最新发布
php-yyds
11-13 1420
目录1、url：要发送请求的URL地址。2、type：请求的类型，可选参数，包括GET、POST、PUT、DELETE等，默认为GET。3、data：要发送到服务器的数据，可以是一个字符串、数组或对象。默认为null。4、dataType：从服务器返回的响应数据的类型，可选参数，括"xml"、"json"、"html"、"text"等，默认为智能猜测。5、contentType：发送请求的数据格式，可选参数， 默认为"application/x-www-form-urlencoded"。常用的还有"appl
jQuery $.ajax方法
weixin_30782331的博客
04-17 223
$.ajax() 方法是 jQuery 最底层的 Ajax 实现。 它的结构为：$.ajax(options) 该方法只有1个参数，但在这个对象里包含了 $.ajax() 方法所需要的请求设置以及回调函数等信息，参数以 key / value 的形式存在，所有参数都是可选的，常用参数如下表所示。 参数名称 类型 说明 url String (默认为当前页地址）...
利用jQuery来实现Ajax
xihuanLilia的博客
03-03 1661
Ajaxget()不带参数时带参数时post()ajax（）使用$.ajax()发起get请求使用$.ajax() 发起POST请求 get() 在jQuery中 $.get()函数的功能比较单一 它是专门用来发起get请求的 从而将服务器上的资源请求到客户端来使用 $.get()函数的语法如下 $.get( url , [data] ,{callback}) 第一个参数url 是字符串类型 也是必须要有的 他代表 要请求的资源地址 第二个参数data 是要以对象方式 它代表请求资源期间需要携带的参数
$.get与$.ajax的差别
04-02
$.get和$.ajax都是jQuery中用于发起异步请求的方法，它们的主要区别如下： 1. 参数不同 $.get(url, data, success, dataType)的参数依次为请求的URL、发送到服务器的数据、请求成功后的回调函数、返回的数据类型；...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值